VUE3 el-table拖拽

### Vue3 中 `el-table` 组件实现行拖拽排序 为了在 Vue3 的项目中使用 `el-table` 和 SortableJS 来实现实现行拖拽排序的功能，可以按照如下方法操作： #### 安装依赖库 首先需要安装 Element Plus 和 SortableJS 插件。Element Plus 是 Element UI 对 Vue 3.x 版本的支持版本。 ```bash npm install element-plus sortablejs --save ``` #### 导入必要的模块并初始化 SortableJS 确保在项目的入口文件（通常是 main.js 或 setup 文件）里引入 Element Plus 并注册全局组件；对于 SortableJS，则只需要按需加载即可[^1]。 #### 创建带有拖拽功能的数据表 下面是一个简单的例子展示如何创建一个支持拖拽排序的表格： ```html <template> <div id="app"> <el-table :data="tableData" style="width: 100%" @row-drag-end="handleRowDragEnd"> <!-- 表格列定义 --> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> import { ref, onMounted } from 'vue'; import Sortable from 'sortablejs'; export default { name: "App", setup() { const tableData = ref([ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' } ]); let elTableBody; function handleRowDragEnd(evt) { console.log('drag end:', evt); // 更新数据源顺序... } onMounted(() => { nextTick().then(() => { elTableBody = document.querySelector('.el-table__body-wrapper tbody'); new Sortable(elTableBody, { animation: 150, ghostClass: 'sortable-ghost', chosenClass: 'sortable-chosen', dragClass: 'sortable-drag', onEnd({ newIndex, oldIndex }) { if (newIndex !== undefined && oldIndex !== undefined) { const movedItem = tableData.value.splice(oldIndex, 1)[0]; tableData.value.splice(newIndex, 0, movedItem); } } }); }); }); return { tableData, handleRowDragEnd }; } }; </script> <style scoped> .sortable-ghost{ opacity: .8; color: #fff!important; background: red !important; } .sortable-chosen,.sortable-drag{ /* 颜色样式 */ background-color:#4AB7BD ; } </style> ``` 此代码片段展示了如何通过监听 `onEnd` 事件，在每次完成拖动后调整数组内元素的位置，并同步更新视图中的显示效果。