sortAble与el-table拖拽排序组件bug

最近在做要求拖拽排序表格遇到的一些bug，先看问题

• 1：拖拽后不按照拖动的位置去放置，排序混乱；但是看控制台，拖拽的行与要放置的行都没问题

于是找到了饿了么官网，发现是rowkey导致的问题，

rowKey必须要唯一，而且只接受string与function； 在将rowKey改变后，解决问题 <el-table :ref="'dragTable' + rowId || ''" :data="tableData" :row-key="(row)=>row.id" max-height="700">

• 2：由于我的使用场景是tab切换，每个tab下都有排序表格；然后出现一个问题是，每个拖拽表格的禁用与启用互相影响，拖拽失效 这种情况显而易见的是dom之间的影响，于是找到代码，在初始化的时候，由于使用的是document.getElementsByClassName查找元素，就产生这种问题，因为同一个组件类名相同，为了解决这个问题，决定用ref来解决问题

        const el = this.$refs['dragTable' + this.rowId].$el.querySelectorAll('.el-table__body-wrapper > table > tbody'
      )[0];
        const that = this;
        this.sortTable = Sortable.create(el, {
	// 结束拖拽后的回调函数
	onEnd({ newIndex, oldIndex }) {
            console.log('拖动了行，序号(index)"'+oldIndex+'"拖动到序号(index)"' + newIndex+'"');
            const currentRow = that.tableData.splice(oldIndex, 1)[0]; // 将oldIndex位置的数据删除并取出，oldIndex后面位置的数据会依次前移一位
            that.tableData.splice(newIndex, 0, currentRow); // 将被删除元素插入到新位置（currRow表示上面的被删除数据）
                    }
            })

动态绑定ref，然后根据自己的ref去查找，就不会出现问题啦