element plus sortable 排序指定字段

Element Plus的Sortable组件是一个强大的拖拽排序工具，它可以让你轻松地为Vue应用中的列表添加排序功能。如果你想针对特定字段进行排序，你需要在组件的配置中指明`prop`属性，这个属性决定了哪些数据属性会被用来进行排序。

以下是如何使用Sortable对指定字段进行排序的基本步骤：

1. 首先，在你的Vue组件中引入Element Plus的Sortable组件：

<template>
  <el-row :gutter="20">
    <el-col :span="24" class="sortable-container">
      <el-pagination @current-change="handleCurrentChange"></el-pagination>
      <el-table :data="items" :sort-method="customSortMethod" style="width: 100%">
        <!-- ...表头和列... -->
        <el-table-column type="index" label="索引"></el-table-column>
        <el-table-column prop="yourSortingField" label="排序字段名" align="center" @click="swapItems(index, targetIndex)">
          {{ item.yourSortingField }}
        </el-table-column>
      </el-table>
      <el-pagination :total="total" @current-change="handleCurrentChange"></el-pagination>
    </el-col>
  </el-row>
</template>

2. 定义`items`数组，以及`total`用于分页计数。
3. 在数据对象（如`item`）中包含你要排序的字段，比如`yourSortingField`。
4. 创建`customSortMethod`函数，处理自定义排序逻辑，例如基于`yourSortingField`字段的升序或降序排列：

export default {
  data() {
    return {
      items: [], // 你的数据源
      total: 0,
      sortBy: 'yourSortingField', // 当前排序字段
      sortDirection: 'asc', // 升序('asc') 或 降序('desc')
    };
  },
  methods: {
    customSortMethod(a, b) {
      const direction = this.sortDirection === 'asc' ? 1 : -1;
      return a[this.sortBy] < b[this.sortBy] ? -direction : a[this.sortBy] > b[this.sortBy] ? direction : 0; // 使用比较运算符进行排序
    },
    swapItems(indexA, indexB) {
      const temp = this.items[indexA];
      this.items[indexA] = this.items[indexB];
      this.items[indexB] = temp;
      // 如果需要实时更新排序，调用table的`sort`方法
      this.$refs.table.handleSort({
        column: { prop: 'yourSortingField' }, // 确保指向正确的排序字段
        order: this.sortDirection === 'asc' ? 'ascending' : 'descending',
      });
    }
  },
  computed: {
    sortedItems() {
      return this.items.sort(this.customSortMethod);
    }
  },
};

5. 在`<el-table>`上使用`:sort-method`绑定`customSortMethod`函数，并确保点击排序字段时触发`swapItems`方法。