el-table 点击排序 调用自己的排序功能

在Element UI中，el-table组件的排序功能可以通过点击列标题来触发，默认情况下，Element UI会根据列的数据类型进行排序。但如果你想要调用自己的排序功能，你可以使用el-table的sort-change事件。

sort-change事件在表格的排序条件发生变化时触发，它会返回一个事件对象，其中包含排序的相关信息，如prop（当前排序的列的属性），order（排序的顺序，可以是'ascending'或'descending'）。

你可以监听这个事件，并根据返回的排序条件来调用自己的排序方法。下面是一个示例代码，演示了如何使用sort-change事件来实现自定义的排序逻辑：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @sort-change="handleSortChange">
    <el-table-column prop="name" label="姓名" sortable="custom"></el-table-column>
    <el-table-column prop="date" label="日期" sortable="custom"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ]
    };
  },
  methods: {
    handleSortChange({ column, prop, order }) {
      // 根据返回的prop和order调用自定义的排序方法
      if (prop) {
        this.tableData = this.customSort(this.tableData, prop, order);
      }
    },
    customSort(data, prop, order) {
      // 自定义排序逻辑
      data.sort((a, b) => {
        let valueA = a[prop];
        let valueB = b[prop];
        if (order === 'ascending') {
          return valueA < valueB ? -1 : 1;
        } else {
          return valueA > valueB ? -1 : 1;
        }
      });
      return data;
    }
  }
};
</script>

在上面的代码中，我们为el-table组件添加了@sort-change="handleSortChange"事件监听器。当用户点击列标题进行排序时，handleSortChange方法会被调用，并接收到一个包含排序条件的对象。

在handleSortChange方法中，我们根据prop和order调用了customSort方法，传入表格数据、列属性和排序顺序。customSort方法实现了自定义的排序逻辑，然后返回排序后的数据。

请注意，在el-table-column中，我们将sortable属性设置为"custom"，这告诉Element UI我们想要使用自定义的排序逻辑，而不是默认的排序。

通过这种方式，你可以完全控制el-table的排序行为，并实现自己的排序逻辑。