elementui 拖拽表格

### ElementUI 中实现拖拽表格功能 #### 引入必要的依赖项 为了在 Vue 3 的环境中使用 `element-plus` 并结合 `SortableJS` 来实现表格的拖拽排序，在项目的主入口文件（通常是 `main.js` 或者 `app.js`）中需要引入 `element-plus` 及其样式，并注册全局组件。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` 对于 `SortableJS`，可以在相应的 `.vue` 文件内局部引入： ```javascript import Sortable from 'sortablejs'; ``` #### 创建带有拖拽功能的表格组件 下面是一个简单的例子展示如何创建一个支持行拖拽的表格。此示例假设已经安装并配置好了上述提到的所有包。 ```html <template> <div id="dragTable"> <el-table :data="tableData" style="width: 100%" @row-drag-end="onRowDragEnd"> <!-- 定义表头 --> <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 setup> import { ref, onMounted } from 'vue'; import Sortable from 'sortablejs'; // 初始化表格数据 let tableData = ref([ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }, // 更多的数据... ]); function onRowDragEnd(event) { const newIndex = event.newIndex; const oldIndex = event.oldIndex; console.log(`Item moved from index ${oldIndex} to ${newIndex}`); } onMounted(() => { nextTick().then(() => { new Sortable(document.getElementById('dragTable').querySelector('.el-table__body-wrapper tbody'), { animation: 150, ghostClass: "ghost", chosenClass: "chosen", dragClass: "dragging", handle: '.handle', // 如果有特定的手柄可以指定这里 onUpdate: function (evt) { let targetRow = evt.item.querySelector('.el-table__row'); // 更新视图中的数组顺序以匹配新的 DOM 结构 [...document.querySelectorAll('.el-table__row')].forEach((tr, i) => { tr.dataset.index = i; // 设置每一行的新索引 }); // 这里可以根据实际需求处理逻辑上的重新排列操作 console.log('Updated order:', Array.from(tableData.value).map(item => item.name)); } }); }); }); </script> <style scoped> /* 自定义样式 */ .dragging { opacity: 0.7; } .chosen { background-color: lightblue !important; } .ghost { border-top: 2px solid red; border-bottom: 2px solid red; } .handle { cursor: move; } </style> ``` 这段代码展示了如何通过监听 `@row-drag-end` 事件获取拖动结束后的信息以及利用 `SortableJS` 对象设置回调函数来响应用户的交互行为[^4]。 #### 处理排序结果保存至服务器端 当用户完成拖拽调整后，可以通过发送 HTTP 请求的方式把最新的排序状态同步给后台服务。这通常涉及到向 API 发送 POST/PUT 请求携带更新过的列表作为参数。