由于项目需求的原因，要求对 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}
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>;
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;
注释：此文没有对拖拽后的列宽进行保存处理，有关拖拽后的列宽保存操作，可自行灵活处理！
