东莞招聘信息网seo技术培训茂名

在 Vue 2 和 Element UI 中，如果你想要通过鼠标拖拽来修改 el-table 的顺序，可以使用 Sortable.js 库来实现。以下是具体步骤和代码示例：

---

实现步骤

1. 安装依赖
   首先，需要安装 sortablejs：

   npm install sortablejs --save
   

2. 引入 Sortable.js
   在你的 Vue 组件中引入 Sortable.js。

3. 绑定拖拽事件
   使用 Sortable.create 方法对表格的 <tbody> 进行拖拽排序，并实时更新数据。

4. 更新数据
   拖拽完成后，更新 Vue 数据以同步表格的显示。

---

示例代码

<template><div><el-tableref="dragTable":data="tableData"style="width: 100%"border><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script>
import Sortable from "sortablejs";export default {data() {return {tableData: [{ date: "2025-04-10", name: "张三", address: "北京市" },{ date: "2025-04-09", name: "李四", address: "上海市" },{ date: "2025-04-08", name: "王五", address: "广州市" },],};},mounted() {this.initSortable();},methods: {initSortable() {const table = this.$refs.dragTable.$el.querySelector(".el-table__body-wrapper tbody");Sortable.create(table, {animation: 150, // 动画效果onEnd: (evt) => {const { oldIndex, newIndex } = evt;// 更新数据顺序const movedItem = this.tableData.splice(oldIndex, 1)[0];this.tableData.splice(newIndex, 0, movedItem);},});},},
};
</script><style scoped>
/* 样式可以根据需求自行调整 */
</style>

---

代码说明

1. mounted 钩子
   在组件挂载后调用 initSortable 方法初始化拖拽功能。
2. 获取表格的 <tbody> 元素
   使用 this.$refs.dragTable.$el.querySelector 获取表格的 <tbody> 元素。
3. Sortable.create
   • animation: 设置拖拽动画时间（单位为毫秒）。
   • onEnd: 拖拽完成时触发的回调函数，参数 evt 包含了拖拽的起始索引 (oldIndex) 和目标索引 (newIndex)。
4. 更新数据
   使用数组的 splice 方法将被拖拽的行从原位置移除，并插入到新位置。

---

注意事项

1. 样式问题
   如果表格内容较多或有复杂的样式，可能需要调整 Sortable.js 的配置或 CSS 样式，以确保拖拽体验流畅。
2. 性能优化
   对于大数据量的表格，建议分页加载或虚拟滚动，避免性能瓶颈。
3. 兼容性
   确保 Sortable.js 和 Element UI 的版本兼容，必要时查看官方文档。

---

这样，你就可以通过鼠标拖拽来修改 el-table 表格的顺序了！