antdesign中table排序去掉取消排序选项

在Ant Design的Table组件，默认排序有三种状态：点击升序、点击降序、取消排序。下面是去掉取消排序步骤的方法。

1、html部分

<template>
     <a-table style="min-width: 1000px" :locale="{cancelSort:'点击降序'}" @change="handleTableChange" :columns="columns" class="px-10" :pagination="false" bordered :data-source="tableList" :loading="dataLoading">
      <template #bodyCell="{ column,record }">
        <template v-if="column.key === 'phoneModel'">
         {{record.phoneModel}}
          <span v-if="record.systemVersion">
            ({{record.systemVersion}})
          </span>
        </template>
        <template v-if="column.key === 'problemType'">
          <span :class="record.problemType==0?'':'color-red'">{{ record.problemType==0?'反馈':'举报'}}</span>
        </template>
        <template v-if="column.key === 'reply'">
          <a-tag v-if="record.reply == 0">未回复</a-tag>
          <a-tag color="green" v-else-if="record.reply == 1">已回复</a-tag>
          <a-tag color="red" v-else>回复失败</a-tag>
        </template>
        <template v-if="column.key === 'createDate'">
          <span v-if="record.createDate" v-text="format(record.createDate)" ></span>
        </template>
        <template v-if="column.key === 'operation'">
          <a-button class="p-5" shape="circle" type="primary" title="回复" @click="reply(record)">
            <template #icon><SendOutlined /></template>
          </a-button>
        </template>
      </template>
    </a-table>
</template>

2、script部分

<script>
 import {ref,computed} from 'vue';

 //排序的受控属性，用此控制列的排序，设置排序默认值为倒序
 const sortOrderTest = ref('descend');

 //这里一定要用computed，如果用ref的话表格是没法刷新的
 const columns = computed(() => {
   return [{
     title: '反馈人',
     dataIndex: 'userName',
     key: 'userName',
   },{
     title: '反馈人邮箱',
     dataIndex: 'contactEmail',
     key: 'contactEmail',
   },{
     title: '反馈人使用手机（版本）',
     dataIndex: 'phoneModel',
     key: 'phoneModel',
   },{
     title: '反馈人地区',
     dataIndex: 'countryName',
     key: 'countryName',
   },{
     title: '反馈类型',
     dataIndex: 'problemType',
     key: 'problemType',
   },{
     title: '状态',
     dataIndex: 'reply',
     key: 'reply',
   },{
     title: '反馈时间',
     dataIndex: 'createDate',
     key: 'createDate',
     sortOrder: sortOrderTest.value,
     //支持的排序方式，取值为 'ascend' 'descend'
     sortDirections: ['descend', 'ascend'],//官方文档写的这个配置，要是能直接去掉取消排序不就好了吗？
     sorter: true,
   },{
     width:80,
     align:'center',
     title: '操作',
     key: 'operation',
     fixed: 'right',
   }];
 });
 // 触发表格排序
 const handleTableChange = (pag, filters, sorter) => {
   //每次change的时候，要去改变一下设置控制排序变量的sortOrderTest，当sorter.order输出的是undefined 时，修改为descend --- 这个根据个人情况来咯
   sortOrderTest.value = sorter.order || 'descend';
 };
 return{
    sortOrderTest,
    handleTableChange,
    columns
 }
</script>

3、重点来了！！！按照以上方法操作后，表头显示下一次排序的 tooltip 提示一直是点击升序、取消排序循环展示。实则取消排序就是降序，但是这种视觉效果肯定是不好的。所以要在a-table标签上加上locale配置

:locale=“{cancelSort:‘点击降序’}” 意思是把 “取消排序” 的文字改为点击降序