ElementPlus 中使用sortable="custom" 自定义按钮主动触发排序

目的

ElementPlus 中使用【自定义按钮】主动触发排序功能，主要还是产品的要求，虽然，ElementPlus中带有排序功能

实现

实现步骤

1. 设置 sortable="custom"：在需要排序的列上设置 sortable="custom" 属性。
2. 监听 sort-change 事件：这个事件会在用户尝试对表格进行排序时触发（包括点击表头和程序触发），但不会自动执行排序，而是由开发者决定如何处理。
3. 添加按钮并绑定点击事件：创建一个按钮，当用户点击时，手动触发排序逻辑。

示例代码

<template>
  <div>
    <!-- 添加一个按钮用于触发排序 -->
    <el-button @click="manualSort('date', 'ascending')">按日期升序</el-button>
    <el-button @click="manualSort('date', 'descending')">按日期降序</el-button>

    <!-- 表格组件 -->
    <el-table ref="table" :data="sortedData" style="width: 100%" @sort-change="handleSortChange">
      <el-table-column prop="date" label="日期" sortable="custom"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 示例数据
        { date: '2025-01-01', name: '张三', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2024-09-15', name: '李四', address: '上海市普陀区金沙江路 1517 弄' },
        { date: '2023-06-25', name: '王五', address: '上海市普陀区金沙江路 1519 弄' }
      ],
      sortedData: [],
      currentSort: { prop: '', order: '' }
    }
  },
  methods: {
    manualSort(prop, order) {
      this.currentSort = { prop, order };
      this.handleSortChange({ prop, order });
    },
    handleSortChange({ prop, order }) {
      if (prop === 'date') {
        this.sortedData = [...this.tableData].sort((a, b) => {
          const dateA = new Date(a.date);
          const dateB = new Date(b.date);
          if (order === 'ascending') {
            return dateA - dateB;
          } else {
            return dateB - dateA;
          }
        });
      } else {
        this.sortedData = [...this.tableData]; // 如果不是指定的列，则不排序
      }
    }
  },
  mounted() {
    // 初始化数据
    this.sortedData = [...this.tableData];
  }
}
</script>

解释

• sortable="custom"：为 el-table-column 设置此属性，告诉 Element Plus 不要自动处理排序，而是让开发者自己处理。

• @sort-change 监听器：每当用户尝试对表格进行排序时（包括通过按钮触发的手动排序），都会触发 handleSortChange 方法。

• manualSort 方法：当你点击按钮时，调用此方法，它会更新当前的排序状态并手动触发 handleSortChange 方法。

• handleSortChange 方法：在这个方法中，实现了具体的排序逻辑。这里以“日期”列为例，根据传入的排序顺序（升序或降序）对数据进行排序，并将排序后的数据赋值给 sortedData。