vue3 实现el-tabel 拖动排序

要实现 el-table 的拖动排序，可以借助 Vue3 中新增的 Composition API 和 el-table 提供的 sortable 属性。

首先，需要在 el-table 中设置 sortable 属性为 true，表示开启排序功能：

<el-table :data="tableData" :sortable="true">
  <!-- 表头和表格内容 -->
</el-table>

然后，在 setup 函数中使用 ref 和 reactive 创建响应式数据，并监听 el-table 的排序事件，将排序后的数据更新到响应式数据中：

import { ref, reactive } from 'vue';

export default {
  setup() {
    // 创建响应式数据
    const tableData = reactive({
      list: [
        { name: '张三', age: 20, score: 90 },
        { name: '李四', age: 22, score: 85 },
        { name: '王五', age: 21, score: 95 },
      ],
    });

    // 监听 el-table 的排序事件
    const handleSortChange = ({ prop, order }) => {
      tableData.list.sort((a, b) => {
        const valA = a[prop];
        const valB = b[prop];
        if (order === 'ascending') {
          return valA > valB ? 1 : -1;
        } else {
          return valA < valB ? 1 : -1;
        }
      });
    };

    return {
      tableData,
      handleSortChange,
    };
  },
};

最后，在 el-table-column 中设置 sortable 属性为 'custom'，并绑定 handleSortChange 方法，即可实现拖动排序：

<el-table :data="tableData.list" :sortable="true" @sort-change="handleSortChange">
  <el-table-column label="姓名" prop="name" sortable="custom"></el-table-column>
  <el-table-column label="年龄" prop="age" sortable="custom"></el-table-column>
  <el-table-column label="分数" prop="score" sortable="custom"></el-table-column>
</el-table>