vue结合el-table实现表格行拖拽排序（基于sortablejs）

在Vue中结合Element UI的el-table和row-drag-js实现行拖拽排序的示例代码如下：

首先，安装row-drag-js插件：

npm install row-drag-js --save

然后，在Vue组件中使用：

<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      row-key="id"
      @row-dragend="onRowDragEnd"
    >
      <el-table-column
        v-for="column in tableColumns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
      ></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
import Sortable from 'row-drag-js';
 
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 30 },
        { id: 2, name: 'Jane', age: 25 },
        { id: 3, name: 'Bob', age: 22 },
        // ...更多数据
      ],
      tableColumns: [
        { label: 'Name', prop: 'name' },
        { label: 'Age', prop: 'age' },
      ],
    };
  },
  mounted() {
    this.rowDrop();
  },
  methods: {
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody');
      const that = this;
      Sortable.create(tbody, {
        animation: 180,
        delay: 0,
        onEnd({ newIndex, oldIndex }) {
          const targetRow = that.tableData.splice(oldIndex, 1)[0];
          that.tableData.splice(newIndex, 0, targetRow);
        },
      });
    },
    onRowDragEnd(event) {
      // 可以在这里处理拖拽后的数据更新逻辑
      console.log('拖拽结束', event);
    },
  },
};
</script>

在这个例子中，我们首先在data选项中定义了表格的数据和列属性。然后，在mounted钩子中调用了rowDrop方法来初始化行拖拽功能。rowDrop方法使用Sortable.create来创建排序实例，并绑定了拖拽结束的回调函数onEnd，它会在用户放开鼠标后更新表格数据的顺序。

请确保你的项目中已经正确安装了Element UI，并且正确引入了所需的CSS和JavaScript文件。