本文介绍如何在React应用中结合Ant Design（antd）库，利用react-resizable组件来实现Table表格的列宽拖拽调整功能。首先通过npm安装react-resizable和可能需要的react-draggable依赖，然后创建一个ResizeableTitle组件，处理拖拽事件并更新列宽状态。在Table组件中，将handleResize方法和自定义components属性与antd的Table组件结合，使每个表头单元格具有拖拽功能。注意，使用react-resizable需引入其样式文件以显示拖拽图标。
react+antd用react-resizable实现Table拖拽调整列宽
npm下载依赖包
npm install react-resizable --save
如果上述报错缺依赖包react-draggable还需要引入react-draggable包，并重启项目
使用
import React, {PureComponent} from 'react';
import { Resizable } from 'react-resizable';
const ResizeableTitle = (props) => {
const { onResize, width, ...restProps } = props;
if ( !width ) {
return
}
return (
)
}
class Table extends PureComponent {
constructor(props) {
super(props);
}
this.state = {
columns: this.props.columns // 从父组件拿到表头 或者 直接将表头写到此处
}
components = {
header: {
cell: ResizeableTitle,
},
};
handleResize = index => (e, { size }) => {
最低0.47元/天 解锁文章
6231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
