vue2 el-table-column 接口排序实现

在 Vue2 中，el-table-column 接口的排序功能实现与 Vue3 类似，也是通过 sort-method 属性来实现的。以下是一个简单的示例：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="Name" sortable :sort-method="sortByName"></el-table-column>
  <el-table-column prop="age" label="Age" sortable></el-table-column>
</el-table>

export default {
  data() {
    return {
      tableData: [
        { name: 'Alice', age: 20 },
        { name: 'Bob', age: 25 },
        { name: 'Charlie', age: 18 }
      ]
    };
  },
  methods: {
    sortByName(a, b) {
      return a.name.localeCompare(b.name);
    }
  }
};

在上面的示例中，我们给第一个 el-table-column 添加了 sort-method 属性，并将其绑定到一个名为 sortByName 的方法上。这个方法使用 String.prototype.localeCompare() 方法来比较两个字符串的大小关系，从而实现按照姓名排序的功能。第二个 el-table-column 没有指定 sort-method 属性，因此默认按照数字大小排序。

需要注意的是，sort-method 只能用于排序，而不能用于筛选。如果需要筛选功能，可以使用 el-table-column 的 filters 属性配合 filter-method 实现。另外，还需要在 el-table 上添加 :default-sort 属性来指定默认排序的列和排序方式。例如：

<el-table :data="tableData" :default-sort="{ prop: 'age', order: 'descending' }" style="width: 100%">
  <el-table-column prop="name" label="Name" sortable :sort-method="sortByName"></el-table-column>
  <el-table-column prop="age" label="Age" sortable></el-table-column>
</el-table>

在上面的示例中，我们通过 :default-sort 属性指定了默认按照年龄倒序排序。