vue elementUi+sortable.js实现嵌套表格拖拽

首先说下项目需求，一个多层嵌套的表格，行可以进行拖拽排序，但不能跨主级去拖拽，下拉可以异步获取数据，考虑了很久，还是用最熟悉的vue+element来做，但是element没有拖拽排序的功能，所以在此基础上加入sortable.js去实现拖拽功能。

后台返回的排序规则是 每个数据都带有3个属性 id next prev ，用这3个属性实时的去更新排序

id表示这一条数据的id

next表示下一条数据的id

prev表示上一条数据的id

html部分

data部分

 flattArray:[],
 originalData:[],
 tableData: [],
 arr:[],
 maps:new Map()

我这里定义了四个数组和一个map，flattArray是平铺的数据 originalData数组也是平铺的数据(以防数据出错，没有啥实际用途) tableData是表格渲染的数据 arr是点击下拉异步请求的数据,maps是tableData改变后去重新渲染数据用的

methods部分

首先我定义了一个方法去深拷贝，这样改变一个数据的时候，其他数据不会改变

 //深拷贝
 getNewObject(val) {
     let resObj = JSON.stringify(val);
     return JSON.parse(resObj);
 },

加载页面从接口 获取 tableData数据 并深拷贝 tableData

getDetails(id){
    axios.get(url).then(res =>{
        if(res.data.code === 0){
           this.tableData = res.data.data
           this.tableData.map( item =>{
             item.hasChildren = true
             delete item.children
           })
           this.flattArray = this.getNewObject(this.tableData)
           this.originalData = this.getNewObject(this.tableData)
         }else{
             this.$message.error('网络错误');
        }
   }).catch(function (error) {
      this.$message.error('网络错误');
   });
},

这里表格就已经渲染出来了 ，因为下拉的数据要异步去获取，所以在element提供的下拉事件里面去请求数据，这里去获取子级的数据，并给maps赋值，利用递归，把数据平铺、组装。

//点击下拉图标异步加载数据
load(tree, treeNode, resolve) {
            this.maps.set(tree.id, { tree, treeNode, resolve })
            axios.get(`url` + tree.id).then(res => {
                if (res.data.code == 0) {
                    this.arr = res.data.data
                    this.arr.map(item => {
                        item.hasChildren = true
                        delete item.children
                        this.flattArray.push(item)
                    })
                    resolve(this.arr)
                    const tree = buildTree(this.flattArray, 1);
                    //组装tree
                    function buildTree(nodes, parent) {
                  &n