antdesignvue1.7 表格 列排序

在 Ant Design Vue 1.7 中，你可以使用 `sorter` 属性为表格列指定排序规则。

首先，你需要在表格列中添加 `sorter` 属性，并将其设置为一个排序函数。例如，你可以使用以下代码为一个名为 `age` 的列添加排序功能：

<a-table-column title="Age" dataIndex="age" sorter :sort-order="sortOrder.age" @sort-change="handleSortChange"></a-table-column>

在上面的代码中，`sorter` 属性设置为 `true`，这表示该列支持排序。`sort-order` 属性指定当前排序状态，你可以在 `handleSortChange` 方法中更新它。

接下来，你需要实现 `handleSortChange` 方法。该方法接受一个包含排序信息的对象作为参数，你可以从中获取排序字段和排序顺序，并更新表格数据。

以下是一个简单的 `handleSortChange` 方法的示例：

handleSortChange(pagination, filters, sorter) {
  const { field, order } = sorter;
  const data = [...this.dataSource];

  data.sort((a, b) => {
    if (order === 'ascend') {
      return a[field] - b[field];
    } else {
      return b[field] - a[field];
    }
  });

  this.dataSource = data;
  this.sortOrder = {
    [field]: order,
  };
},

在上面的代码中，我们首先从 `sorter` 对象中获取排序字段和排序顺序。然后，我们将表格数据复制到一个新数组中，并使用 `Array.sort()` 方法根据排序规则对数组进行排序。最后，我们更新了表格数据和排序状态。

希望这可以帮助你实现表格列排序功能。