el-table 排序

el-table 可以使用 sort 属性来实现排序功能。sort 属性是一个对象，可以设置对哪些列进行排序，以及排序的方式。

示例代码：

<el-table :data="tableData" :sort="sortObj">
  <el-table-column prop="name" label="姓名" sortable></el-table-column>
  <el-table-column prop="age" label="年龄" sortable></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 25, address: '上海市' },
        { name: '王五', age: 30, address: '广州市' },
        { name: '赵六', age: 22, address: '深圳市' }
      ],
      sortObj: {
        prop: 'age',
        order: 'ascending'
      }
    }
  }
}

在示例代码中，我们设置了三列，其中前两列设置了 sortable 属性，表示可以进行排序。sortObj 对象指定了默认的排序方式，按照年龄升序排列。

如果需要对其他列进行排序，可以点击表头进行切换。当点击表头时，会触发 sort-change 事件，我们可以监听该事件来处理排序逻辑。

示例代码：

<el-table :data="tableData" :sort="sortObj" @sort-change="handleSortChange">
  <el-table-column prop="name" label="姓名" sortable></el-table-column>
  <el-table-column prop="age" label="年龄" sortable></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 25, address: '上海市' },
        { name: '王五', age: 30, address: '广州市' },
        { name: '赵六', age: 22, address: '深圳市' }
      ],
      sortObj: {
        prop: 'age',
        order: 'ascending'
      }
    }
  },
  methods: {
    handleSortChange(sort) {
      console.log(sort.prop); // 排序的列名
      console.log(sort.order); // 排序的方式
      // 处理排序逻辑
    }
  }
}

在 handleSortChange 方法中，sort 参数包含了排序的列名和排序的方式，我们可以根据这些信息来处理排序逻辑。