ant design table 表格实现拖拽排序

antd

官方文档有支持拖拽的写法，参考地址：https://ant.design/components/table-cn/
根据

antd

的写法实现了拖拽，但是

antd

的写法只是实现了功能，对代码没有进行封装，如果你想在多个页面进行拖拽，可能写很多重复代码，所以，本人根据官方文档写法进行了组件化，针对多个页面只需引入即可使用。

1.首先引入支持拖拽的相关插件

npm install react-dnd --save
npm install react-dnd-html5-backend --save
npm install immutability-helper --save

2.在公共组件目录下新增一个

dragTable

组件文件，如图：

3.在

dragTable

组件中代码如下:

import React, { Component } from 'react';
import { DragSource, DropTarget } from 'react-dnd';

let dragingIndex = -1;

class BodyRow extends React.Component {
render() {
const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props;
const style = { ...restProps.style, cursor: 'move' };

let className = restProps.className;
if (isOver) {
if (restProps.index > dragingIndex) {
className += ' drop-over-downward';
}
if (restProps.index < dragingIndex) {
className += ' drop-over-upward';
}
}

return connectDragSource(
connectDropTarget(<tr {...restProps} className={className} style={style} />),
);
}
}

const rowSource = {
beginDrag(props) {
dragingIndex = props.index;
return {
index: props.index,
};
},
};

const rowTarget = {
drop(props, monitor) {
const dragIndex = monitor.getItem().index;
const hoverIndex = props.index;

// Don't replace items with themselves
if (dragIndex === hoverIndex) {
return;
}

// Time to actually perform the action
props.moveRow(dragIndex, hoverIndex);

// Note: we're mutating the monitor item here!
// Generally it's better to avoid mutations,
// but it's good here for the sake of performance
// to avoid expensive index searches.
monitor.getItem().index = hoverIndex;
},
};

export const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
}))(
DragSource('row', rowSource, connect => ({
connectDragSource: connect.dragSource(),
}))(BodyRow),
);

4.在使用拖拽的TableComponent组件页引入

import { DragableBodyRow } from '@/components/dragTable.component';
//同时需要引入
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';

//在组件TableComponent 加入的方法
components = {
body: {
row: DragableBodyRow,
},
};

moveRow = (dragIndex, hoverIndex) => {
const { data } = this.state;
const dragRow = data[dragIndex];
this.setState(
update(this.state, {
data: {
$splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]],
},
}),() => {
console.log(this.state.data)
}
);
};
//在组件TableComponent 的render函数内 ,Table增加两个方法
<Table
rowSelection={rowSelection}
dataSource={this.state.data}
columns={columns(this,match.params.id,match.params.name)}
rowKey={rowKey}
pagination={pagination}
components={this.components}  //此处为拖拽新增的方法1
onRow={(record, index) => ({     //此处为拖拽新增的方法2
index,
moveRow: this.moveRow,
})}
loading={loading}
onChange={this.onTablePageChange}
/>

5.最后在导出时包裹

export default DragDropContext(HTML5Backend)(TableComponent)

6.拖拽过程中加入的样式，放在对应

scss

文件内，引入即可

tr.drop-over-downward td {
border-bottom: 2px dashed #1890ff;
}

tr.drop-over-upward td {
border-top: 2px dashed #1890ff;
}