Ant Design + react-resizable实现列表页可拖拽宽度变化
查找了下Ant Design中的Table组件,没有发现表格header列头可以拖拽实现宽度变化的功能,领导要想要这种效果,看了下当前的WEB的 第三方UI,可能只有Material-UI支持
import { DataGridPro, GridToolbar } from '@mui/x-data-grid-pro';
但是Material-UI中的 DataGridPro在包'@mui/x-data-grid-pro'中,'@mui/x-data-grid-pro'对于React的最低版本支持是React 17,由于项目属于之前的项目,基础框架的迭代和代码重构没有在当前日程中,所以只能对Ant Design的Table进行改造
react-resizable 可以满足当前的需求,接下来便是对 react-resizable + Ant Design Table的整合封装。
代码如下:组件封装
import React from 'react';
import { Table } from 'antd';
import { Resizable } from 'react-resizable';
import 'react-resizable/css/styles.css';
import './index.css'
const ResizeableTitle = (props) => {
const { onResize, width, ...restProps } = props;
if (!width) {
return <th {...restProps} />;
}
return (
<Resizable
width={width?width:null}
height={0}
minConstraints={[50, 50]}
onResize={onResize}
draggableOpts={{ enableUserSelectHack: false }}
>
<th {...restProps} />
</Resizable>
);
}
class DragTable extends React.Component {
constructor(props) {
super(props);
this.state = {
columns: this.props.columns
}
}
static getDerivedStateFromProps(nextProps, prevState) {
return null;
}
components = {
header: {
cell: ResizeableTitle,
},
};
handleResize = index => (e, { size }) => {
this.setState(({ columns }) => {
const nextColumns = [...columns];
nextColumns[index] = {
...nextColumns[index],
width: size.width?size.width:'100%',
};
return { columns: nextColumns };
});
}
render() {
const { components, columns, ...others } = this.props;
const newColumns = this.state.columns.map((col, index) => ({
...col,
onHeaderCell: column => ({
width: column.width?column.width:100, // 100 没有设置宽度可以在此写死 例如100试下
onResize: this.handleResize(index),
}),
}))
return (<Table
components={this.components}
columns={newColumns}
{ ...others }
></Table>)
}
}
export default DragTable;
值得注意的是‘const { components, columns, ...others } = this.props;’ 这里是排除原有的components和columns, 使用我们改造过后的components和columns。
import React from 'react';
import DragTable from '../../components/DragTable';
class APP extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
data: []
}
}
render() {
const columns = [
{ title: 'name', dataIndex: 'name', key: 'name', ellipsis: true },
{ title: 'value', dataIndex: 'value', key: 'value', ellipsis: true }
]
return (<DragTable
columns={columns}
loading={this.state.loading}
rowKey='id'
dataSource={this.state.data}
size='small'
pagination={false}
style={{marginTop: 10}}
rowClassName={(record, index) => {}}
></DragTable>);
}
}
使用,跟Ant Design 中的Table使用一样, 原有的参数、配置,函数都像之前一样正常使用
自定义,可错拽区域或者样式,使用handle参数 handle 可以是一个HTMLElement元素,
<Resizable
width={width?width:null}
height={0}
minConstraints={[50, 50]}
onResize={onResize}
draggableOpts={{ enableUserSelectHack: false }}
>
<th {...restProps} />
</Resizable>
还有一种方法:重定义react-resizable-handle 的样式
.react-resizable-handle-se {
top: 0;
right: 0;
cursor: w-resize;
}
.react-resizable-handle {
position: absolute;
width: 10px;
height: calc(100% - 10px);
background-repeat: no-repeat;
background-origin: content-box;
box-sizing: border-box;
background-image: none;
background-position: bottom right;
border-right: 1px solid #f0f0f0;
margin: 5px 0px;
padding: 0px;
}
对于 的参数和配置可以参考官方说明:react-resizable - npmhttps://www.npmjs.com/package/react-resizable