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 (<Resizablewidth={width?width:null}height={0}minConstraints={[50, 50]}onResize={onResize}draggableOpts={{ enableUserSelectHack: false }}><th {...restProps} /></Resizable>);}class DragTable extends ponent {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={ponents}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 ponent {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 - npm/package/react-resizable
