antdvue table 手动更改defaultSortOrder从descend改为asend 高亮按钮不变

在 AntdVue 的 Table 组件中，如果手动更改了 `defaultSortOrder` 属性的值，那么默认排序的顺序就会改变。如果要同时保持排序按钮的高亮状态，可以通过修改 `sortOrder` 属性的值来实现。

具体来说，可以在 `sort-change` 事件中监听排序的变化，然后手动修改 `sortOrder` 属性的值。例如：

<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :default-sort-order="'descend'"
    @sort-change="handleSortChange"
  >
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          sorter: true,
        },
        {
          title: 'Age',
          dataIndex: 'age',
          sorter: true,
        },
        {
          title: 'Address',
          dataIndex: 'address',
          sorter: true,
        },
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
        },
      ],
      sortOrder: 'descend',
    };
  },
  methods: {
    handleSortChange(pagination, filters, sorter) {
      if (sorter.order === 'descend') {
        this.sortOrder = 'descend';
      } else {
        this.sortOrder = 'ascend';
      }
    },
  },
};
</script>

在上面的例子中，我们在 `data` 中添加了一个 `sortOrder` 属性，用于保存当前的排序顺序。在 `sort-change` 事件中，我们通过判断 `sorter.order` 的值来决定是否将 `sortOrder` 改为 `ascend`。最后，在 `a-table` 中，我们将 `default-sort-order` 属性设置为 `'descend'`，并将 `sort-change` 事件绑定到 `handleSortChange` 方法上。

这样，在手动更改 `defaultSortOrder` 属性的值后，排序按钮的高亮状态就会根据 `sortOrder` 的值来更新。