vue3 实现el-tabel 行拖拽排序

实现el-table的行拖拽排序可以通过以下步骤实现：

1. 在el-table上添加vuedraggable指令，该指令是一个基于Sortable.js的Vue组件，用于拖放排序。

2. 为el-table中的每一行添加一个唯一的标识符，例如使用row-key属性。

3. 在el-table上添加@change事件监听器，该事件会在行排序发生变化时触发。

4. 在@change事件处理程序中，使用Vue.set方法更新数据源中的顺序。

下面是基本的代码示例：

<template>
  <el-table :data="tableData" :row-key="row => row.id" vuedraggable @change="handleSortChange">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 18, address: '北京' },
        { id: 2, name: '李四', age: 21, address: '上海' },
        { id: 3, name: '王五', age: 25, address: '广州' },
        { id: 4, name: '赵六', age: 30, address: '深圳' },
      ]
    };
  },
  methods: {
    handleSortChange(newList) {
      this.tableData = newList;
    }
  }
};
</script>

在上面的示例中，我们使用vuedraggable指令启用了拖拽排序功能，并在@change事件处理程序中更新了数据源中的顺序。其中，row-key属性用于标识每一行的唯一性。