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 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

Ant Design + react-resizable实现列表页可拖拽宽度变化相关推荐

ant design vue pro 支持多页签模式页签可以缓存
ant design vue pro 支持多页签模式页签可以缓存代码贴在最后启动之后页面是这样的: 第一步:修改 src/layouts/BasicLayout.vue 文件,在该文件中添加mu ...
React + Ant Design Pro项目实现keep-alive页签
背景 PC端管理系统,采用 ant design pro 方案,它是阿里的一个管理系统框架,技术栈是react. 相比vue,react一个先天不足是不支持 keep-alive,所以管理系统中的多页 ...
Redux案例-基于Ant Design React
1.Ant Design介绍和环境初始化 Ant Design是一套面向企业级开发的UI框架,视觉和动效作的很好.阿里开源的一套UI框架,它不只支持React,还有ng和Vue的版本,我认为不论你的前 ...
Ant design vue pro 添加多页签
1.修改模板 /src/layouts/BasicLayout.vue 添加如下代码第一处: <a-layout-content :s ...
弹窗案例实现（Ant Design + React hooks）
Ant Design 是React里常用的UI框架我们选用的是Ant Design 的 Modal 我们可以从Ant Design 官网看到一个基本的弹框大致长这个样子一个弹框,大概需要弹框名称, ...
Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
React基于antd Table实现可拖拽调整列宽的表格
实现功能 1:表格列宽初始自动分配.列宽总和不能超过容器宽度(无横向滚动条,公司项目特殊需求) 2:当容器宽度变化时,保持当前列宽的分配比例,等比缩小 3:拖动过程中不进行列宽的调整,只有释放之后再进 ...
带你封装一个上传图片组件(ant design+react)
目录需求实现实现效果代码封装 UploadImage组件备注 BaseUploadImage组件 index.less 样式文件父组件引用需求实现 1可以支持上传最多九张图片 2图片支持预 ...
ant design pro,删除最后一页退回上一页
首先需要三个变量,分别是删除后的总数以及页码还有每页条数: var nowDatasSize: number = -1var currentPage: number = 1;var pageSize: ...

Ant Design + react-resizable实现列表页可拖拽宽度变化

Ant Design + react-resizable实现列表页可拖拽宽度变化相关推荐

最新文章

热门文章