js鼠标拖拽 修改el-table表格顺序 vue2 + element-ui js

在 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-table
      ref="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 表格的顺序了！