react ant 表格实现 多级嵌套拖拽排序和多选

在React中，Ant Design是一个常用的UI库，提供了丰富的表格组件(Table)用于数据展示。若要在Ant Design Table中实现多级嵌套的拖拽排序和多选功能，你需要结合其提供的Column、Form、Draggable以及Selection components。以下是一个概述：

1. **列配置** (Column): 使用`children`属性可以创建嵌套结构。你可以设置`sorter`属性使其支持排序，并在需要的地方启用`draggable`属性以便于拖拽。

import { Column } from 'antd';

// 嵌套列示例
const nestedColumns = [
  {
    title: '父列',
    children: [
      {
        title: '子列1',
        sorter: true,
        draggable: true,
        // ...其他配置
      },
      {
        // 同样可以设置拖拽排序和多选属性
      },
    ],
  },
];

2. **表格组件** (Table): 利用`onRow`回调处理行的复杂交互，比如在拖拽事件中更新数据状态，并通过`selection`属性控制多选。

import { Table } from 'antd';

const { Column, SelectionModel } = Table;

const selection = new SelectionModel({
  // 初始化选择模式，如checkbox或多选
  type: 'checkbox',
});

// 更新表格状态，当有行被拖动
function handleSortChange(recordIndex, order) {
  // 更新数据模型的排序
}

function handleSelectChange(selections) {
  // 根据选择的行操作数据
}

<Table
  columns={nestedColumns}
  rowKey="key"
  selection={selection}
  onRow={(record) => ({
    ...record,
    onSortChange: handleSortChange.bind(null, record.index),
    onSelectChange: handleSelectChange.bind(null, selections),
  })}
/>