antd Table 拖拽 调整列宽

拖拽 调整列宽"/>

antd Table 拖拽 调整列宽

1. 先看 拖拽效果

2. 开发实现

安装依赖 yarn add @minko-fe/use-antd-resizable-header

 "@minko-fe/use-antd-resizable-header": "^2.5.0"

引入库 方法+样式

import { useAntdResizableHeader } from '@minko-fe/use-antd-resizable-header';
import '@minko-fe/use-antd-resizable-header/dist/style.css';

利用 useAntdResizableHeader 获取 columns 的 resizableColumns components tableWidth

const columns = [];const { resizableColumns, components, tableWidth } = useAntdResizableHeader({columns: useMemo(() => columns, []),
});

Table or ProTable 添加主要 attribute columns components scroll

<Table
columns={resizableColumns}
components={components}
scroll={{ x: tableWidth }}/>or<ProTablecolumns={resizableColumns}components={components}scroll={{ x: tableWidth }}/>

3. 注意

columns 不能全设置 width 否则不能进行拖拽

4. 其他说明 link

两种方法