【react】react中使用antd的table实现拖拽列宽保存记忆功能

已于 2024-03-27 17:10:13 修改
阅读量631 收藏 6
点赞数 5
文章标签： javascript react.js 前端
于 2024-03-27 17:08:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LLY0505/article/details/137080162
版权

在开发的过程中，根据业务需求，想要实现表格的拖拽，并增加拖动结束后记忆功能，一一激励在开发的过程中遇到的困难点。

根据官网示例实现表格可拖拽，以下是页面代码：

import React from 'react';
import { Resizable } from 'react-resizable';
import { Table } from 'antd';
import styles from "./index.less"

const ResizeableTitle = props => {
  const { onResize, width, ...restProps } = props;

  if (!width) {
    return <th {...restProps} />;
  }

  return (
    <Resizable
      width={width}
      height={0}
      onResize={onResize}
      draggableOpts={{ enableUserSelectHack: false }}
    >
      <th {...restProps} />
    </Resizable>
  );
};

class Demo extends React.Component {
  state = {
    columns: [
      {
        title: 'Date',
        dataIndex: 'date',
        width: 200,
      },
      {
        title: 'Amount',
        dataIndex: 'amount',
        width: 100,
      },
      {
        title: 'Type',
        dataIndex: 'type',
        width: 100,
      },
      {
        title: 'Note',
        dataIndex: 'note',
        width: 100,
      },
      {
        title: 'Action',
        key: 'action',
        render: () => <a>Delete</a>,
      },
    ],
  };

  components = {
    header: {
      cell: ResizeableTitle,
    },
  };

  data = [
    {
      key: 0,
      date: '2018-02-11',
      amount: 120,
      type: 'income',
      note: 'transfer',
    },
    {
      key: 1,
      date: '2018-03-11',
      amount: 243,
      type: 'income',
      note: 'transfer',
    },
    {
      key: 2,
      date: '2018-04-11',
      amount: 98,
      type: 'income',
      note: 'transfer',
    },
  ];

  handleResize = index => (e, { size }) => {
    this.setState(({ columns }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      return { columns: nextColumns };
    });
  };

  render() {
    const columns = this.state.columns.map((col, index) => ({
      ...col,
      onHeaderCell: column => ({
        width: column.width,
        onResize: this.handleResize(index)
      }),
    }));

    return (<div className={styles.resizableClass}>
      <Table bordered components={this.components} columns={columns} dataSource={this.data} />;
      </div>)
  }
}

export default Demo;

以下为index.less的代码

.resizableClass{
  :global{
    .react-resizable {
        position: relative;
        background-clip: padding-box;
      }
      
    .react-resizable-handle {
        position: absolute;
        width: 10px;
        height: 100%;
        bottom: 0;
        right: -5px;
        cursor: col-resize;
        z-index: 1;
      }
      .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th{
        border-left: 1px solid #f1f1f1;
      }
  }
}

 下一步便是获取鼠标拖拽结束时的列宽，首先在ResizeableTitle中给Resizable添加onResizeStop事件，如以下代码：

const ResizeableTitle = props => {
  const { onResize, width, ...restProps } = props;

  if (!width) {
    return <th {...restProps} />;
  }

  const handleResizeStop = (e) => {
    console.log("e===",e)
  }

  return (
    <Resizable
      width={width}
      height={0}
      onResize={onResize}
      onResizeStop={handleResizeStop}
      draggableOpts={{ enableUserSelectHack: false }}
    >
      <th {...restProps} />
    </Resizable>
  );
};

打印出来的 e 并没有我们想要的dataIndex和width，后面发现在调用时的onHeaderCell里column就是变更后的列，它将column.width作为width传递给了ResizeableTitle，同理，我们可将column传递过去，仅仅拿到改变后的列是不够的，我们还需要传递原有的state.columns

const columns = this.state.columns.map((col, index) => ({
      ...col,
      onHeaderCell: column => ({
        width: column.width,
        onResize: this.handleResize(index),
        column:column,// 将 变更列的列表 传递给 ResizeableTitle
        columns: this.state.columns // 将 state.columns 传递给 ResizeableTitle
      }),
    }));

这样我们便能在ResizeableTitle拿到值，将其放在handleResizeStop中进行数据处理。在这里突然发现，this.state.columns也是被改变了的，如此我们就只需要穿this.state.columns了，column不用传，但是由于我们项目是用的接口存储，再加上还有控制列的显示与隐藏，因此需要进行传递。但本次示例主要是想存在localStorage。给state.columns每一项加上key，保证唯一性。

const { columns } = props;
const handleResizeStop = (e) => {
    let pageColumns = []
    columns.forEach(ele =>{
      pageColumns.push({key:ele.key, width:ele.width})
    })
    window.localStorage.setItem('pageColumns',JSON.stringify(pageColumns))
  }

鼠标拖拽后，我们在控制台可以看到以下数据，这里我给操作列也加上了width。 

接下来我们就可以在Dom的componentDidMount中进行处理了，这样就可以实现数据存储功能啦。

 componentDidMount() {
    const { columns } = this.state;
    const popoverColumns = []
    let localColumns = window.localStorage.getItem('pageColumns')
    if(localColumns){
      const cols = JSON.parse(localColumns)
      cols.forEach(ele=>{
        if (columns.filter(item => ele.key === item.key)[0]) {// 查找有没有相同列
          if(ele.width){
            popoverColumns.push(Object.assign(columns.filter(item => item.key === ele.key)[0], { width: ele.width}))
          }else{
            popoverColumns.push(Object.assign(columns.filter(item => item.key === ele.key)[0]))
          }
        }
      })
    }
    this.setState({ columns:popoverColumns})
  }

以下是完整代码 (index.less一直没变还是用的上面的代码)

import React from 'react';
import { Resizable } from 'react-resizable';
import { Table } from 'antd';
import styles from "./index.less"

const ResizeableTitle = props => {
  const { onResize, width,column,columns, ...restProps } = props;

  if (!width) {
    return <th {...restProps} />;
  }

  const handleResizeStop = (e) => {
    let pageColumns = []
    columns.forEach(ele =>{
      pageColumns.push({key:ele.key, width:ele.width})
    })
    window.localStorage.setItem('pageColumns',JSON.stringify(pageColumns))
  }

  return (
    <Resizable
      width={width}
      height={0}
      onResize={onResize}
      onResizeStop={handleResizeStop}
      draggableOpts={{ enableUserSelectHack: false }}
    >
      <th {...restProps} />
    </Resizable>
  );
};

class Demo extends React.Component {
  state = {
    columns: [
      {
        title: 'Date',
        dataIndex: 'date',
        key: 'date',
        width: 200,
      },
      {
        title: 'Amount',
        dataIndex: 'amount',
        key: 'amount',
        width: 100,
      },
      {
        title: 'Type',
        dataIndex: 'type',
        key: 'type',
        width: 100,
      },
      {
        title: 'Note',
        dataIndex: 'note',
        key: 'note',
        width: 100,
      },
      {
        title: 'Action',
        key: 'action',
        width: 100,
        render: () => <a>Delete</a>,
      },
    ],
    listColumns:[]
  };

  componentDidMount() {
    const { columns } = this.state;
    const popoverColumns = []
    let localColumns = window.localStorage.getItem('pageColumns')
    if(localColumns){
      const cols = JSON.parse(localColumns)
      cols.forEach(ele=>{
        if (columns.filter(item => ele.key === item.key)[0]) {// 查找有没有相同列
          if(ele.width){
            popoverColumns.push(Object.assign(columns.filter(item => item.key === ele.key)[0], { width: ele.width}))
          }else{
            popoverColumns.push(Object.assign(columns.filter(item => item.key === ele.key)[0]))
          }
        }
      })
    }
    this.setState({ columns:popoverColumns})
  }

  components = {
    header: {
      cell: ResizeableTitle,
    },
  };

  data = [
    {
      key: 0,
      date: '2018-02-11',
      amount: 120,
      type: 'income',
      note: 'transfer',
    },
    {
      key: 1,
      date: '2018-03-11',
      amount: 243,
      type: 'income',
      note: 'transfer',
    },
    {
      key: 2,
      date: '2018-04-11',
      amount: 98,
      type: 'income',
      note: 'transfer',
    },
  ];

  handleResize = index => (e, { size }) => {
    this.setState(({ columns }) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      return { columns: nextColumns };
    });
  };

  render() {
    const columns = this.state.columns.map((col, index) => ({
      ...col,
      onHeaderCell: column => ({
        width: column.width,
        onResize: this.handleResize(index),
        column:column,// 将 变更列的列表 传递给 ResizeableTitle
        columns: this.state.columns // 将 state.columns 传递给 ResizeableTitle
      }),
    }));

    return (<div className={styles.resizableClass}>
      <Table bordered components={this.components} columns={columns} dataSource={this.data} />;
      </div>)
  }
}

export default Demo;

Y-CV工程师
关注
react-resizable实现antd Table组件拖动改变列宽
Sponge_bob_的博客
10-22 2867
import { Table } from 'antd'; import React, { useEffect, useRef, useState } from 'react'; import { Resizable } from 'react-resizable'; import './style.css'; const ResizeableTitle = (props: any) => { const { onResize, width, ...restProps } = props;
React(hook)基于antd Table实现可拖拽调整列宽的表格
weixin_38884718的博客
03-29 6587
React基于antd Table实现可拖拽调整列宽的表格 前言        在日常的工作开发中，会经常的用到表格，进行数据展示，但是数据的长度不一，初始设置的表格列宽不一定符合数据的展示要求，故有时需要手动的进行表格列宽的调整。        用过antd的童鞋，都知道antd的表格并不支持列拖拽功能；那么在react+antd的项目中如何实现可拖动表格呢？ 实现功能 1：表格列宽初始自动分配、列宽总和不能超过容器宽度（无
react-table-hoc-draggable-columns:用于可拖动列的ReactTable HOC
04-28
React表可拖动的列 用于可拖动列的ReactTable HOC 高阶组件，使Draggable列可用于重新排序或交换头寸。 *注意：此版本支持React Table V6。 文献资料 安装 npm install --save react-table-hoc-draggable-columns 用法 import ReactTable from 'react-table' ; import "react-table/react-table.css" ; import withDraggableColumns from 'react-table-hoc-draggable-columns' ; import 'react-table-hoc-draggable-columns/dist/styles.css' ; const ReactTableDraggableColumns =
鼠标拖动调整table列宽实例
09-28
web页面中通过鼠标拖动来调整table列宽的实例，用JS实现，使用起来超级简单，只需要把JS文件导入，然后在需要实现该效果的table中套用CSS就可以了，还不会的去看实例，实例中有DEMO的页面。
HOW - Antd Table 组件实现拖拽变更宽度（结合 tooltip 气泡）实践
weixin_58540586的博客
08-14 933
在Antd - Table 表格中，最新文档里已经没有拖拽的 demo 展示了。我们通过谷歌引擎搜索后，发现在这条贴子里，有一个Antd 官方 resizable column demo。因此，我们会基于该示例来实现我们想要的最终效果。
antd Table 拖拽 调整列宽
weixin_45682449的博客
03-10 1614
antd Table column拖拽 调整列宽
antd实现Table拖拽调整列宽
weixin_46600931的博客
01-30 5194
table表单列宽拖拽在最新的antd 版本中已经没有demo了，需要去过完版本去找3.26.19。注意：在实现拖曳功能的前提是。
Antd Table 表格 拖拽列宽
芝芝为荔枝
06-22 1412
在实际的应用中，Table组件直接再次封装为可以拖动的组件供所有人使用，而且拖动后的布局是可以本地存储的，或者用接口去存也是一样，实现效果如下下面是实现的具体代码，封装了一个MyTable 组件，在这个组件中可以自定义antd Table组件的交互样式等。
react antdesign table列可拖拽调整宽度
weixin_45842655的博客
07-06 2705
react antdesign table列可拖拽调整宽度
使用react-resizable实现antd的table表格列拖拽调整宽度以及解决闭包
zhanghhh2的博客
04-17 1784
在antd的3.x版本是有可伸缩列功能的，但是到了4.x以后，antd的官网就没有示例了,但是实现的方式还是一样的，本案例基于3.x的案例，改为拖拽结束的时候更新列的位置，而不是实时更新拖拽位置。上述代码在第一次拖拽的时候效果是正常的，但是在第二次拖拽的时候，handleResize里。时，获取到的cols是每一列是没有onHeaderCell函数的，导致无法继续拖拽。都能获取到上次修改后的列数组。
antd表头拖拽列宽
weixin_43932597的博客
04-20 426
【代码】antd表头拖拽列宽。
antd-table-dragula:Ant Design Table + Dragula - 行拖放
05-31
桌+ 行拖放和状态更新 这个项目是用引导的。 在项目目录中，您可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。
antd-table结合react-resizable实现多级表头可拖拽表格
m0_58072033的博客
05-21 3227
react-resizable、antd-table、拖拽、多级表头、可变列宽
基于antd V4 Table 虚拟滚动 + 可拖拽列宽
weixin_45456092的博客
04-17 1063
common.tsx 自适应高度。
react + antd 实现表格的列宽可变，数据量大时页面刷新不卡顿
weixin_48192626的博客
10-28 1706
有需求需要实现表格的列宽拖拉可变，在开始拖拉和放下的过程中在行头显示一条虚线表标明位置，鼠标释放后刷新表格。 上代码！ 1. 拖拉传参组件代码 import { FC, useState } from 'react' import { Resizable } from 'react-resizable' // 引入react-resizable npm i xxx 或 yarn add xxx import { deBounce } from '@/utils/utilConvenrt' // 防抖
Antd+React+react-resizable实现表格拖拽功能
陌上花开然不归矣
02-05 1493
【Antd+React+react-resizable实现表格拖拽功能】常见问题1、拖拽时，鼠标离开，拖拽被还原，80%原因是因为父组件触发了useState更新，column被还原成初始态，2、拖拽要设置最小宽度和最大宽度，防止拖拽过程中找不到元素。二、在antd写入tab，并引用拖拽组件。
Ant Design - Table
kelly0721的博客
03-17 737
Table 中报错 TypeError: react WEBPACK IMPORTED MODULE_0__.useEffect is not a function
react antd table拖拽
qq_37061571的博客
07-09 255
然后就可以愉快的使用了，使用实例(只需要换个名字就好了，其他和正常使用table没有区别，但是要有宽度哦，不然没办法拖拽)定义一个公用组建 ResizableTable.tsx。定义样式文件 resize.scss。
antd TableLayout 表格拖拽
weixin_43915401的博客
01-25 890
antd官网 import { Table } from 'antd'; import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc'; import { MenuOutlined } from '@ant-design/icons'; import arrayMove from 'array-move'; const DragHandle = sortableHandle(() =>
antd pro table 拖动列宽
最新发布
09-07
在Ant Design Pro的Table组件中，可以通过配置属性来实现列宽的拖动调整功能，提供用户友好的交互体验。 要实现拖动列宽的功能，你需要确保Table组件中启用了相关属性。通常，这个功能可以通过设置`draggable`属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值