ant design table实现上下行拖拽功能(类组件)

在Ant Design的Table组件中实现行拖拽功能，可以使用react-dnd和react-dnd-html5-backend库。以下是一个简化的例子，展示了如何实现表格行的拖拽功能：

1. 安装必要的库：

npm install react-dnd react-dnd-html5-backend

2. 实现拖拽逻辑：

import React, { useState } from 'react';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { Table, Tag, Space, Button } from 'antd';
import update from 'immutability-helper';
 
const { Draggable, Droppable } = useDrag;
 
const Row = ({ index, moveRow, className, style, ...restProps }) => {
  const ref = React.useRef(null);
  const [{ isDragging }, drag] = useDrag(() => ({
    type: 'row',
    item: { index },
    end: (item, monitor) => {
      const dropResult = monitor.getDropResult();
      if (item && dropResult) {
        moveRow(item.index, dropResult.index);
      }
    },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
      handlerId: monitor.getHandlerId(),
    }),
  }));
  drag(ref);
  return (
    <tr
      ref={ref}
      {...restProps}
      className={className}
      style={{ ...style, opacity: isDragging ? 0.5 : 1 }}
    />
  );
};
 
const MyTable = () => {
  const [data, setData] = useState([
    // ... 初始数据
  ]);
 
  const moveRow = (dragIndex, hoverIndex) => {
    const dragRow = data[dragIndex];
    setData(
      update(data, {
        $splice: [
          [dragIndex, 1],
          [hoverIndex, 0, dragRow],
        ],
      }),
    );
  };
 
  return (
    <DndProvider backend={HTML5Backend}>
      <Table
        components={{
          body: {
            row: Draggable,
          },
        }}
        rowKey="key"
        dataSource={data}
        columns={columns}
        onRow={(record, index) => ({
          index,
          moveRow,
        })}
      />
    </DndProvider>
  );
};
 
const columns = [
  // ... 定义你的列
];
 
export default MyTable;

在这个例子中，我们定义了一个自定义的Row组件，它使用useDrag钩子从react-dnd包中。我们还定义了一个moveRow函数，它在拖拽停止时被调用，并且更新了数据源以反映新的排序。

请注意，这个例子假设你已经有了一个表格的数据源和列定义。你需要根据你的实际情况调整columns和数据部分。