vue elementui table sort

Vue ElementUI提供了非常方便的表格组件，并且内置了排序功能。只需要在表格的`<el-table-column>`元素上指定`prop`属性和`sortable`属性即可实现排序。

以下是一个基本的示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" sortable></el-table-column>
    <el-table-column prop="name" label="姓名" sortable></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2021-01-01', name: '张三', address: '北京市' },
        { date: '2021-01-02', name: '李四', address: '上海市' },
        { date: '2021-01-03', name: '王五', address: '广州市' },
      ],
    };
  },
};
</script>

在上面的代码中，我们在`<el-table-column>`元素上指定了`prop`和`sortable`属性，其中`prop`属性对应表格数据中的字段名，`sortable`属性指定该列可以排序。

如果我们希望默认按某个字段升序排序怎么办呢？我们可以在`<el-table>`元素上指定`default-sort`属性，如下所示：

<template>
  <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'ascending' }">
    <el-table-column prop="date" label="日期" sortable></el-table-column>
    <el-table-column prop="name" label="姓名" sortable></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2021-01-01', name: '张三', address: '北京市' },
        { date: '2021-01-02', name: '李四', address: '上海市' },
        { date: '2021-01-03', name: '王五', address: '广州市' },
      ],
    };
  },
};
</script>

在上面的代码中，我们在`<el-table>`元素上指定了`default-sort`属性，它是一个对象，包含两个属性：`prop`表示默认排序的字段名，`order`表示默认排序的方式，取值为`ascending`（升序）或`descending`（降序）。这样，表格就会默认按日期升序排序。