antd-table结合react-resizable实现多级表头可拖拽表格

关键字：react-resizable、antd-table、拖拽、多级表头、可变列宽

react-resizablehttps://github.com/react-grid-layout/react-resizable
antd-tablehttps://ant-design.gitee.io/components/table-cn/#components-table-demo-fixed-header

先看效果：

上代码：

第一步：在项目中安装react-resizable

npm i react-resizable -S

第二步：基于antd的table组件、进行封装、代码如下：

注意点：

1、替换掉antd-table的原有的header

2、使用递归、给每个表头添加resize的事件、以及处理resize之后的宽度设置

import React, { useState, useEffect } from 'react';
import { Table } from 'antd';
import { Resizable } from 'react-resizable';
import './resizeAble.scss';const components = {header: {cell: (props) => {const { onResize, width, ...restProps } = props;if (!width) {return <th {...restProps} />;}return (<Resizable width={width} height={0} onResize={onResize}><th {...restProps} /></Resizable>);},},
};function modifyDeepTreeNodeValueFn({ colList, modifyObj, indexes }) {let colList_ = colList;let tempArr = [...colList_];function modifyDeepTreeNodeValue(indexes) {const indexLen = indexes.length;for (let i = 0; i < indexLen; i++) {const index_ = indexes[i];if (i < indexLen - 1) {const targetArr = tempArr[index_];if (!targetArr) {break;}tempArr = (tempArr[index_] && tempArr[index_].children) || [];} else {const target = tempArr[index_];if (!target) {break;}tempArr[index_] = {...target,...modifyObj,};}}}if (indexes.length === 1) {const index_ = indexes[0];colList_[index_] = {...colList_[index_],...modifyObj,};return colList_;}modifyDeepTreeNodeValue(indexes);return colList_;
}export default function ResizeTable(props) {const [selfColumns, setSelfColumns] = useState([]);const { columns } = props;useEffect(() => {setSelfColumns([...columns]);}, [columns]);const handleResize = (indexes) => {return (e, d) => {const { width } = d.size;const nextColumns = modifyDeepTreeNodeValueFn({colList: selfColumns,modifyObj: { width },indexes,});console.log(nextColumns);setSelfColumns([...nextColumns]);};};const setColumnsResizeable = (cols, indexes = []) => {return [...cols].map((colItem, index) => {const { children, width } = colItem;const currentIndexes = [...indexes, index];const children_ = Array.isArray(children)? setColumnsResizeable(children, currentIndexes): null;return {...colItem,onHeaderCell: () => ({width,onResize: handleResize(currentIndexes),}),children: children_,indexes: currentIndexes,};});};const columns_ = setColumnsResizeable(selfColumns);console.log(columns_);return <Table {...props} columns={columns_} components={components} />;
}

第三步：使用组件：

import React from 'react';
import ResizeTable from './components/resizeTable';
import tableData from './tableData.json';
import columns from './columns.json';export default function resizeAbleTablePage() {return (<ResizeTabledataSource={tableData}columns={columns}borderedrowKey="id"scroll={{ x: '100%' }}/>);
}

注意：scroll={{ x: '100%' }}需要写、代表自动根据父元素来限制宽度，不写的话，拖拽改变列宽是不会生效的

antd-table结合react-resizable实现多级表头可拖拽表格相关推荐

iview+vue实现表头的拖拽功能
一.项目需求: 需求:表格实现表头拖拽.排序.树形表格展示.下载Excel.下载CSV格式的数据项目里用到的技术:iview的table+vue 参考文章:https://www.cnblogs.c ...
React antd Table 实现单元格点击表头斜线分组等功能
先上成品示意图: 几个关键步骤: 一定义数据结构: export const data = [{key: 'row1',beforeUpdateLevel: '等级1',level_1: '保',l ...
antd vue的modal可拖拽指令,包括表头拖拽和表体拖拽
项目需要使用antd-vue的modal可以拖拽,然后在网上搜了一下方法, 有一个老哥写了个方法链接在这: https://blog.csdn.net/baidu_20264113/article/ ...
React 拖拽改变大小，react-resizable 属性详解
源于布局需求,要求Antd的Layout组件中,侧边栏Sider可以拖拽改变宽度-- 开源插件,基于react-draggable插件(同一作者),详见<react-resizable>: ...
利用jQuery UI为CMS网站实现拖拽布局效果，秒杀table布局
1 实现效果对于使用过CMS系统制作网站的人应该都清楚,制作网站过程有一个重要的步骤就是制作页面布局.目前,实现页面布局有两种方式:table与div.这两种方式各有其优劣之处. Table: 优势 ...
excel怎么把竖排变成横排_excel：斜线表头的制作方法，并且拖拽也不变形，值得收藏...
我们是Excel技术控,大家看完文章喜欢的话,可以关注下.谢谢支持. 在excel的使用过程中,经常要制作单斜线表头,双斜线表头,以及多斜线表头,实际都不难.一个痛点是,斜线表头的在拖拽,也就是列宽变 ...
Vue3 使用AntDisignVue，table表拖拽
vue版本, AntDisign的table表拖拽,需要付费,或者有,我并没找到所以封装了个简单的table拖拽. 使用场景: 使用拖拽一般是为了排序,所以场景就是对列表数据进行排序. 文章目录注意 ...
antd table动态表头_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
1.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本以前都存在,反正3.16.2版本是存在这个问题的,若是是3.24.0以前的版本估计只能经过修改css样式解决.css 按照官网说的 ...
antd 设置表头属性_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
一.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

antd-table结合react-resizable实现多级表头可拖拽表格

关键字：react-resizable、antd-table、拖拽、多级表头、可变列宽

react-resizablehttps://github.com/react-grid-layout/react-resizable

antd-tablehttps://ant-design.gitee.io/components/table-cn/#components-table-demo-fixed-header

第一步：在项目中安装react-resizable

第二步：基于antd的table组件、进行封装、代码如下：

第三步：使用组件：

antd-table结合react-resizable实现多级表头可拖拽表格相关推荐

最新文章

热门文章