本文主要是介绍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
两种方法
这篇关于antd Table 拖拽 调整列宽的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
