antd table表头拖拽实现（一）

2023-08-04 684

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： antd table表头拖拽实现

前言

按需求我们需要把antd库中table表格的表头，设置为可拖拽的，在antd中并没有现成的属性方法，所以我们需要用到第三方库react-resizable；

本文还封装了可拖拽表头的表格组件，其中有阻止冒泡防止拖拽时引起排序、选中文字等操作。如果你急需此功能，那么可以直接滑倒底部拿取代码。

一、安装 antd、react-resizable 第三方库

yarn add antd react-resizable --save

二、使用步骤

1、引入库

代码如下：

import React, { useState } from 'react'
import { Table } from 'antd'
import { Resizable } from 'react-resizable'
import "react-resizable/css/styles.css"  // 一定要引入样式，否则没有拖拽的小标
// 当然我们也可以不引入，使用自定义拖拽标标，请看下面详情

2、配置

2.1、配置表头拉伸组件：

需要放在组件外部，否则每次拖拽无法更新！

// 可伸缩表头组件，放到组件外
const ResizableTitle = ({ onResize, width, ...restProps }) => {
    if (!width) { return (<th {...restProps} />) };
    return (
        <Resizable
            width={width}
            height={0}
            handle={
                <span
                    className="react-resizable-handle"
                    onClick={e => { e.stopPropagation() }}
                />
            }
            onResize={onResize}
            draggableOpts={{ enableUserSelectHack: false }}
        >
            <th {...restProps} style={{ ...restProps?.style, userSelect: 'none' }} />
        </Resizable>
    );
};

2.2、配置表格列columns：

// 表格数据
const dataSource = [
    { _id: 1, label: '范德萨1', gender: '男' },
    { _id: 2, label: '范德萨2', gender: '女' },
    { _id: 3, label: '范德萨3', gender: '男' },
    { _id: 4, label: '范德萨4', gender: '男' },
    { _id: 5, label: '范德萨5', gender: '女' },
]
// 表格列
const columns = [
    {
        title: '#',
        dataIndex: '_id',
        width: 60,
        ellipsis: true,
    },
    {
        title: '名称',
        dataIndex: 'label',
        width: 200,
        ellipsis: true,
    },
    {
        title: '性别',
        dataIndex: 'gender',
        width: 200,
        ellipsis: true,
    },
    {
        title: '操作',
        key: 'action',
        // width: 200,
        ellipsis: true,
        render: () => (
            <a>修改</a>
        ),
    },
];

表格列的最后一列不要设置宽度，否则会引起拉伸就会触发以下异常！。

3e735207d09774151f7f947c3947dabc_93256d9a170640d0a81aea66466c3098.gif

2.3、重新配置表格列，给予拉伸的方法：

// 可伸缩表头组件
const [column, setColumn] = useState(
    columns.map(it => {
      it.ellipsis = {
        showTitle: true
      }
      it.onHeaderCell = col => ({
        width: col.width,
        // !传入newColumn，而不传入column是因为需要拿到有onHeaderCell的值，外面collumn的变化内部监听不到
        onResize: (e, { size }) => handleResize(col, size),
      })
      return it;
    }
    )
  );

2.4、拉伸回调方法：

// table的th实时宽度拖拽的改变
  const handleResize = (col, size) => {
    setColumn(column.map(item => {
      // 如果这个判断对不上，列宽可以移动但是会引起错乱
      if (item.dataIndex === col.dataIndex) {
        item.width = size.width;
      }
      return item
    }))
  }

2.5、自定义拖拽标志

在css或less中设置对应的类名样式，也可以设置为自定义的拖拽图标

// 取消引入样式，通过设置类名，来设置拖拽的标志
.react-resizable-handle {
    position: absolute;
    right: -5px;
    bottom: 0;
    z-index: 1;
    width: 10px;
    height: 100%;
    cursor: col-resize;
}

3、配置table组件

// table的th实时宽度拖拽的改变
 <Table 
  rowKey={'_id'}
    columns={column}
    dataSource={dataSource}
    components={{
      header: {
        cell: ResizableTitle,
      },
    }}
 ></Table>