基于React封装的可拖拽排序的表格组件

87 阅读 0 评论 58 点赞

我是靠谱客的博主活力豆芽，这篇文章主要介绍基于React封装的可拖拽排序的表格组件，现在分享给大家，希望可以做个参考。

废话不多说，直接开干~~~~

1、安装组件所需依赖：

复制代码

1
2
3
4

"react-dnd": "^10.0.2",
"react-dnd-html5-backend": "^10.0.2",
"immutability-helper": "^3.0.1",

2、组件全部代码如下<可直接复制使用>：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';
import {Table,} from 'antd';
import {DndProvider,DragSource,DropTarget,} from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';
let dragingIndex = -1;
//判断2个数组是否相等
function ArrayIsEqual(arr1,arr2){
//如果2个数组对应的指针相同,那么肯定相等,同时也对比一下类型
if(arr1===arr2){
return true;
}else{
if(arr1.length!=arr2.length){
return false;
}else{
for(let i in arr1){
//循环遍历对比每个位置的元素
if(arr1[i]!=arr2[i]){
//只要出现一次不相等,那么2个