表格拖拽排序之react-dnd---结合antd Table

实现效果

首先引入react-dnd需要的npm包

import { DndProvider, DragSource, DropTarget } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';

其次设置Table中的onRow和component属性

components={component}
onRow={ (record, index) => ({
  index,
  moveRow: this.moveRow,
})}

moveRow方法：

  moveRow = (dragIndex, hoverIndex) => {
    const { dataSource } = this.state;
    const dragRow = dataSource[dragIndex];
    this.setState(
      update(this.state, {
        dataSource: {
          $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]],
        },
      }));
    this.setState({
      hasChanged: true,
    });
  };