el-table实现拖拽排序效果：
首先我们需要引入import Sortable from "sortablejs"
const tbody = document.querySelector(
//获取el-table中的 tbody 的dom
".el-table__body-wrapper tbody"
)
this.tableObject = Sortable.create(tbody, {
onEnd: ({ newIndex, oldIndex }) => {
// 获取当前节点的数据
let currRow = this.tableData.splice(oldIndex, 1)[0] //this.tableData是你el-table渲染的数据 注意是你自己的数据
// 替换到新节点上
this.tableData.splice(newIndex, 0, currRow)
let dirSortList = this.tableData.map((v) => {
return v.id
})
this.liSort(dirSortList.join(",")) //this.liSort() 这个方法是我调用后端的接口 传当前排序好的id 此处换为你们自己的方法
},
})
以上就是我们实现拖拽排序的功能
我们将此组件用到项目中如果不是同时复用，不会出现问题的 如 ：
//pub-table是我封装的一个拖拽功能的组件 命名看你们自己
ref="first" :classify="classify" :table-data="tableData" :org-id="orgId" @search="search" > 我们在直接引用的时候并不会出现问题，但是如果我们在el-tabs中去多次引用就会出现问题 ref="tab" v-model="activeName" @tab-click="handleClick" > v-if="activeName == 1" ref="first" :classify="classify" :table-data="tableData" :org-id="orgId" @search="search" > ref="second" :classify="classify" :org-id="orgId" :table-data="tableData" @search="search" > 这是我们发现我们在el-tabs中引入了两次排序组件 我们在使用的时候只有第一次引入的那个拖拽排序组件才可以使用 （具体原因还不清楚，盲猜应该和dom的加载有关系） 解决方案： 我们在每个组件上加一个 v-if 这样的话每次切换tabs的时候 组件都会重新加载 如： v-if="activeName == 1" // active为tabs绑定的data值 切换tabs的时候会绑定到 activeName上 会获取name值 ref="second" :classify="classify" :org-id="orgId" :table-data="tableData" @search="search" > 这样一个完整的拖拽排序就完成了