ant-design的Table组件，react-resizable对表格列宽实现可拖拽处理

一、概述

由于项目需求的原因，要求对 ant-design的表格列宽进行可拖拽处理。但是，ant-design的最新版本已经没有相关的实例了（3.x版本有）。
幸运的是，3.x版本的表格拖拽处理方法仍然可以使用，即集成 react-resizable 插件进行处理。

 

二、操作步骤

1. 安装组件

yarn add react-resizable  或  npm install --save react-resizable

 

2. 新建一个 ResizableTable.jsx 公共组件，作为表格列宽拖拽处理的封装文件

/* 此文件为 react表格 ant-table 对列拉伸的配置文件（不需要列拉伸的表格可以忽略）
* 插件依赖：react-resizable，参考ant-design@3.x 的Table组件（因为ant-design大于3.x版本已经没有相关实例了）
* 使用步骤：
*		1. 引入本组件：如 import ResizableTable from '@/components/ResizableTable.jsx';
*		2. 将 <Table /> 改为 <ResizableTable />，Table配置的属性保持一致；
*		3. columns 的配置数据中，每个字段都需要添加 width 的精确数字；如 [{ title: '名称', dataIndex: 'td01', width: 100 },...]
*		（如果不使用精确数字，而是在本文件的 onHeaderCell 中添加备用值，刚开始拖动时会突然变动列宽的现象，这当然是对交互不友好的）
*/

import React, { useEffect, useState } from "react";
import { Resizable } from "react-resizable";
import { Tooltip, Table } from 'antd';

const ResizableTitle = (props) => {
	const { onResize, width, ...restProps } = props

	if (!width) { return <th {...restProps} /> }
	return (
		<Resizable
			width={width}
			height={0}
			handle={
				<span className="react-resizable-handle" onClick={(e) => { e.stopPropagation() }} />
			}
			onResize={onResize}
			draggableOpts={{ enableUserSelectHack: false }}
		>
			<th {...restProps} />
		</Resizable>
	)
}


/**
 * ant-table 可伸缩列
 * @param props
 * @returns
 */
const ResizableTable = (props) => {
	const [columns, setColumns] = useState([]);

	useEffect(() => {
		if (props.columns) {
			setColumns(props.columns)
		}
	}, [props.columns]);
		
	const handleResize = (index) => (_, { size }) => {
		const newColumns = [...columns];
		newColumns[index] = {
			...newColumns[index],
			width: size.width,
		};
		setColumns(newColumns);
	};

	const mergeColumns = columns.map((col, index) => ({
		...col,
		// render: (text, record, index) => {
		// 	if (col.needRender) {
		// 		return col.render(text, record, index);
		// 	}
		// 	return ( 
		// 		// <Tooltip title={text} placement='topLeft'>
		// 			<div style={{ width: col.width, ...{
		// 				whiteSpace: 'nowrap',
		// 				textOverflow: 'ellipsis',
		// 				overflow: 'hidden',
		// 			} }}>{text}</div>
		// 		// </Tooltip>
		// 	)
		// },
		onHeaderCell: (column) => ({
			width: column.width,//?? 80,
			onResize: handleResize(index),
		}),
	}));

	return (
		<div className="resizeTable">
			<Table
				{...props}
				// bordered
				components={{
					header: {
						cell: ResizableTitle
					}
				}}
				scroll={{ x: 900 }}
				columns={mergeColumns}
				dataSource={props.dataSource}
			/>
		</div>
	)
}

export default ResizableTable

　　

3. 在需要表格列宽拉伸的页面，进行处理

...(此处省略一些无关语句）

// 引入封装组件
import ResizableTable from '@/components/ResizableTable.jsx';

const PageCom = (props) => { 
　　 ...（此处省略一些无关语句）
    
　　const [tableLoading, setTableLoading] = useState(false);//表格加载中
	const [tableData, setTableData] = useState([]);

	const [currentPage, setCurrentPage] = useState(1);
	const [pageSize, setPageSize] = useState(store.getState().global.pageSize);
	const [total, setTotal] = useState(0);

	//表格栏目数据
	const tableColumns = [
	　　{ title: '区域机构', dataIndex: 'orgName', width: 200 },
	　　{ title: '传片数', dataIndex: 'td02', width: 80},
    　　{ title: '正位胸片数', dataIndex: 'td03', width: 100 },
   　　 { title: 'AI阳性数', dataIndex: 'td04', width: 100 },
    　　{ title: 'AI阳性率/10万', dataIndex: 'td05', width: 120 },
    　　{ title: '复核数', dataIndex: 'td06', width: 80 },
	];

	// 表格分页
	const paginationData = {
		position: ['none','bottomCenter'],
		current: currentPage, //当前页码
		pageSize, // 每页数据条数
		pageSizeOptions: store.getState().global.pageSizeOptions,
		total,
		showTotal: (total, range) => (
		    <span>{range[0]}-{range[1]} / 共{total} 条</span>
		),
		showSizeChanger: true,
		onChange: (page, pageSize)=>{
			setCurrentPage(page)
			setPageSize(pageSize)
		}
	};	      

    return <div className="com-wrapper">
		{/* 查询条件  */}
　　　　  {/* ...... */}

		{/* 表格区域 */}
		<div className="app-table-wrapper">
			<div className="table-wrapper">
　　　　　　　　　　{/* 原来配置 */}
				{/* <Table 
　　　　　　　　　 size="small" 
				pagination={paginationData}
				columns={tableColumns} 			
				dataSource={tableData}
				rowKey="id"
				loading={tableLoading} /> */}

　　　　　　　　　　{/* 修改为 */|
				<ResizableTable 
                size="small" 
				pagination={paginationData}
				columns={tableColumns} 			
				dataSource={tableData}
				rowKey="id"
				loading={tableLoading} />
			</div>
		</div>

	</div>;
};

export default PageCom;              

 

4. 表格样式进行处理 

.resizeTable {  
    .react-resizable {
      position: relative;
      background-clip: padding-box;
      user-select: none;
    }

    // 防止默认出现横向滚动条
    .ant-table-content>table{min-width: calc(100% - 5px)!important;}

    .react-resizable-handle {
      position: absolute;
      width: 10px;
      height: 100%;
      bottom: 0;
      right: -5px;
      cursor: col-resize;
      background-image: none;
      z-index: 1;
    }
}

　　

注释：此文没有对拖拽后的列宽进行保存处理，有关拖拽后的列宽保存操作，可自行灵活处理！

 

 

翻译

搜索

复制