vue3+Ant Design Vue3.2 + a-table 表格重置时清空排序图标排序状态

• 方法一

<template>
    <a-table
        bordered
        :columns="columns"
        :data-source="formState.list"
        @change="handleTableChange"
    ></a-table>
<template>
<script setup>
    import { reactive, ref, onMounted } from "vue";
    const columns = ref([
      {
        title: "角色名称",
        dataIndex: "roleName",
        key: "roleName",
        sorter: true,
        ellipsis: true,
        width: 100,
      },
      {
        title: "英文名称",
        dataIndex: "roleNameEn",
        key: "roleNameEn",
        sorter: true,
        ellipsis: true,
        width: 100,
      }
    ]);
    const formState = reactive({
      list: [],
      orderBy: '',
      orderType: '',
    });
    // 每次触发排序是在colums 记录排序状态
    const handleTableChange = (pag, filters, sorter) => {
      columns.value.forEach( item => {
        if(item.key === sorter.field){
          item.sortOrder = sorter.order
        }
      })
      formState.orderBy = sorter.field
      formState.orderType = sorter.order // "ascend" "descend"
      getListMsg()
    }
    // 页面数据初始化加载入口
    onMounted(() => {
      getListMsg();
    });
    // 重置表格排序
    const resetSearch = () => {
      columns.value.forEach( item => {
          item.sortOrder = '';
      })
      formState.orderBy = '';
      formState.orderType = '';
      getListMsg()
    };
</script>

• 方法二 直接了点 通过key 进行重新渲染即可

<template>
    <a-table
        :key="isSet"
        bordered
        :columns="columns"
        :data-source="formState.list"
    ></a-table>
<template>
<script setup>
    import { reactive, ref, onMounted } from "vue";
    const columns = ref([
      {
        title: "角色名称",
        dataIndex: "roleName",
        key: "roleName",
        sorter: true,
        ellipsis: true,
        width: 100,
      },
      {
        title: "英文名称",
        dataIndex: "roleNameEn",
        key: "roleNameEn",
        sorter: true,
        ellipsis: true,
        width: 100,
      }
    ]);
    const formState = reactive({
      list: [],
      orderBy: '',
      orderType: '',
    });
    const isSet = ref(false)
    </script>
    const resetSearch = () => {
        isSet.value = !isSet;
        formState.orderBy = '';
        formState.orderType = '';
        getListMsg()
    };