记录:react+antd表格带有rowSelection选择功能配置时如何拖拽列变换位置

因表格需要rowSelection选择框功能配置,使用之前采用react-drag-listview插件库进行拖拽导致出现拖拽失败并拖拽排序混乱(原因是Table表格rowSelection选择框会占用表头位置，导致出现列拖拽顺序混乱)，所以更换react-sortable-hoc插件库(github.com/clauderic/r…)

利用Table组件的components属性覆盖table的header元素和wrapper、cell，从而实现在拖动table列之后可以移动插入并进行排序,(如果拖拽行，用components属性覆盖table的body元素和wrapper、row);

antd Table组件components 支持的属性如下：

  export interface TableComponents {
    table?: any;
    header?: {
      wrapper?: any;
      row?: any;
      cell?: any;
    };
    body?: {
      wrapper?: any;
      row?: any;
      cell?: any;
    };
  }

地址:github.com/ant-design/…

代码如下：

第一步安装插件库

 npm install react-sortable-hoc --save

array-move是将数组项移动到不同的位置,用于拖拽时候将数组元素排序
安装命令如下：
npm install array-move

import { Table } from 'antd';
import { arrayMoveImmutable } from 'array-move';
import React, { useState } from 'react';
import { SortableContainer, SortableElement } from 'react-sortable-hoc';

const columns = [
  {
    title: 'Sort',
    dataIndex: 'sort',
    width: 30,
    className: 'drag-visible',
    key: '1',
  },
  {
    title: 'Name',
    dataIndex: 'name',
    className: 'drag-visible',
    key: '2',
    width: 30,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: '3',
    width: 30,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: '4',
    width: 30,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

const Dragdrop = () => {
  const [MoveColumn, setMoveColumn] = useState(columns);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    hideSelectAll: true,
    selectedRowKeys,
    onChange: onSelectChange,
  }
  //每个可渲染元素的容器
  const SortableItemth = SortableElement((props) => {
    return <th  {...props} />
  });
  //所有可排序元素的容器
  const SortableBody = SortableContainer((props) => {
    return <thead  {...props} />
  });
  //处理拖拽后的函数
  const onSortEnd = ({ oldIndex, newIndex }) => {
    console.log(oldIndex, newIndex);
    if (oldIndex !== newIndex) {
        const column = [...MoveColumn];
        const item = column.splice(oldIndex, 1)[0];
        column.splice(newIndex, 0, item);
        setMoveColumn(column);
    
      //const newData = arrayMoveImmutable(MoveColumn.slice(), oldIndex, newIndex);
      //setMoveColumn(newData);
    }
  };
  
  //拖拽容器组件 覆盖Table  components的wrapper元素
  const HeaderWrapper = (props) => (
    <SortableBody
      axis={'x'}
      disableAutoscroll
      onSortEnd={onSortEnd}
      {...props}
    />
  );

//标记拖拽列 覆盖Table  components的cell元素
  const HeaderCell = ({ className, style, ...restProps }) => {
    restProps['title'] = restProps.children[1]
    const index = MoveColumn.findIndex(x => x.title === restProps.title);
    return <SortableItemth index={index} {...restProps} />;
  };
  return (
    <Table
      rowSelection={rowSelection}
      pagination={false}
      dataSource={data}
      columns={MoveColumn}
      rowKey="index"
      components={{
        header: {
          wrapper: HeaderWrapper,
          cell: HeaderCell,
        },
      }}
    />
  );
};

export default Dragdrop;