要先安装好Sortable.js依赖 ``` cnpm install sortable.js ``` ### 实现拖动的代码如下 可以直接复制运行 ``` <template> <div class="app-container"> <el-card> <el-table :data="state.tableData" style="width: 100%"> <el-table-column prop="date" label="Date" width="180" /> <el-table-column prop="name" label="Name" width="180" /> <el-table-column prop="address" label="Address" /> </el-table> </el-card> </div> </template> <script lang="ts" setup> import { defineAsyncComponent, reactive, toRefs, onMounted, ref } from 'vue' import Sortable from 'sortablejs' const state = reactive({ tableData: [ { date: '2016-05-03', name: 'Tom-1', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-02', name: 'Tom-2', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-04', name: 'Tom-3', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-01', name: 'Tom-4', address: 'No. 189, Grove St, Los Angeles', }, ] }) //行拖拽 const dragSort = () => { let that = this; // 首先获取需要拖拽的dom节点 const el1 = document.querySelectorAll('.el-table__body-wrapper')[0].querySelectorAll('table > tbody')[0]; Sortable.create(el1, { disabled: false, // 是否开启拖拽,false为开启 ghostClass: 'sortable-ghost', //拖拽样式 animation: 150, // 拖拽延时，效果更好看 group: { // 是否开启跨表拖拽 pull: false, put: false }, onEnd: (evt: any) => { //进行数据的处理，拖拽实际并不会改变绑定数据的顺序 console.log("拖动结束了,", evt) // 可以获取拖动前与拖动后的序号 const { newIndex, oldIndex } = evt console.log(oldIndex, newIndex) // 数据源不会变的哦 console.log(state.tableData) } }); } onMounted(() => { // 实现行拖拽。这个方法一般都要放到数据回来之后，比如数据是通过接口回来的 dragSort() }) </script> <style scoped="scoped" lang="scss"> </style> ``` ### 进行绑定的数据源处理，拖拽实际并不会改变绑定数据的顺序 一般存储改造后的数据就可以了，调用存储方法存储一下就行了。这里要特别注意`el-table的row-id属性这个必需要添加，否则进行数据源操作后数据顺序会错乱哦` ``` <template> <div class="app-container"> <el-card> <el-table :data="state.tableData" row-key="id" style="width: 100%"> <el-table-column prop="date" label="Date" width="180" /> <el-table-column prop="name" label="Name" width="180" /> <el-table-column prop="address" label="Address" /> </el-table> </el-card> </div> </template> <script lang="ts" setup> import { defineAsyncComponent, reactive, toRefs, onMounted, ref } from 'vue' import Sortable from 'sortablejs' const state = reactive({ dictTableKey:1, tableData: [ { id:"1", date: '2016-05-03', name: 'Tom-1', address: 'No. 189, Grove St, Los Angeles', }, { id:"2", date: '2016-05-02', name: 'Tom-2', address: 'No. 189, Grove St, Los Angeles', }, { id:"3", date: '2016-05-04', name: 'Tom-3', address: 'No. 189, Grove St, Los Angeles', }, { id:"4", date: '2016-05-01', name: 'Tom-4', address: 'No. 189, Grove St, Los Angeles', }, ] }) //行拖拽 const dragSort = () => { let that = this; // 首先获取需要拖拽的dom节点 const el1 = document.querySelectorAll('.el-table__body-wrapper')[0].querySelectorAll('table > tbody')[0]; Sortable.create(el1, { disabled: false, // 是否开启拖拽,false为开启 ghostClass: 'sortable-ghost', //拖拽样式 animation: 150, // 拖拽延时，效果更好看 group: { // 是否开启跨表拖拽 pull: false, put: false }, onEnd: (evt: any) => { //进行数据的处理，拖拽实际并不会改变绑定数据的顺序 console.log("拖动结束了,", evt) // 可以获取拖动前与拖动后的序号 const { newIndex, oldIndex } = evt console.log(oldIndex, newIndex) // 数据源不会变的哦 console.log("改造前的数据源", state.tableData) // 这样可以把拖动前的那一行取出来 // const currRow = state.tableData[oldIndex] // 把拖动前的那一行干掉并且取出来 const currRow = state.tableData?.splice(oldIndex, 1)[0] // 把拖动前的那一行放到拖动后的位置 state.tableData?.splice(newIndex, 0, currRow) // 一般存储改造后的数据就可以了，调用存储方法存储一下就行了。 } }); } onMounted(() => { // 实现行拖拽。这个方法一般都要放到数据回来之后，比如数据是通过接口回来的 dragSort() }) </script> <style scoped="scoped" lang="scss"></style> ``` **如果不想改变数据源，可以复制一份数据源出来改造：** 当然这种情况还是比较少的，一般都直接操作数据源了，存储也好存储，不然可能还要维护多份数据 ``` onEnd: (evt: any) => { //进行数据的处理，拖拽实际并不会改变绑定数据的顺序 console.log("拖动结束了,", evt) // 可以获取拖动前与拖动后的序号 const { newIndex, oldIndex } = evt console.log(oldIndex, newIndex) // 数据源不会变的哦 console.log("改造前的数据源",state.tableData) // 这样可以把拖动前的那一行取出来 // const currRow = state.tableData[oldIndex] // 复制一份数据出来改造 let copyData = JSON.parse(JSON.stringify(state.tableData)) // 把拖动前的那一行干掉并且取出来 const currRow = copyData?.splice(oldIndex, 1)[0] // 把拖动前的那一行放到拖动后的位置 copyData?.splice(newIndex, 0, currRow) console.log("改造后的数据源",copyData) // 一般用保存后的数据，调用存储方法存储一下就行了 //state.tableData = copyData } ``` ### dom节点可以通过vue3的ref来获取，特别是封装成组件后每个组件里边的表格都需要拖动的情况 ``` <div ref="tableDataWrappeRef"> <el-card> <el-table :data="state.tableData" style="width: 100%"> <el-table-column prop="date" label="Date" width="180" /> <el-table-column prop="name" label="Name" width="180" /> <el-table-column prop="address" label="Address" /> </el-table> </el-card> </div> ``` ts部分： ``` // dom节点可以通过vue3的ref来获取，特别是封装成组件后每个组件里边的表格都需要拖动的 const el1 = tableDataWrappeRef.value.querySelectorAll('.el-table__body-wrapper')[0].querySelectorAll('table > tbody')[0]; ``` **注意ref要放到dom对象上面比如div,不要放到组件上面，也就是不要放到el-table上面，比如不要这么写：** 这样放到组件上面获取不到dom节点哦 ``` <el-card ref="tableDataWrappeRef"> <el-table :data="state.tableData" style="width: 100%"> <el-table-column prop="date" label="Date" width="180" /> <el-table-column prop="name" label="Name" width="180" /> <el-table-column prop="address" label="Address" /> </el-table> </el-card> ```