ant-design-vue中的table组件具有排序的属性，该排序属性有三种状态：升序、降序和不排序。在项目开发中，有时产品经理会要求排序时只能有升序或降序两种状态，而table组件中却没有相应的API配置，那么我们如何取消不排序的状态呢？

一、排序相关API

table组件中关于排序的API有4个：sorter、sortOrder、sortDirections以及change事件。

sorter：排序函数，本地排序使用一个函数，需要服务端排序可设为 true。

sortOrder： 排序的受控属性，外界可用此控制列的排序，可设置为 ‘ascend’、‘descend’、‘false’。

sortDirections：sortDirections: [‘ascend’ | ‘descend’]改变每列可用的排序方式，切换排序时按数组内容依次切换，设置在table props上时对所有列生效。使用defaultSortOrder属性，设置列的默认排序顺序。

change：分页、排序、筛选变化时触发。

这三个API都需要设置在Column中，Column是列描述数据对象，是 columns 中的一项，Column 使用相同的 API。例如：

columns: [
      { title: "计划入库时间", dataIndex: "planPutStockTime", key: "planPutStockTime", width: 130 ,sortDirections: ['descend', 'ascend'],sorter:true},
      { title: "计划配货时间", dataIndex: "planPreGoodsTime", key: "planPreGoodsTime", width: 130 ,sortDirections: ['descend', 'ascend'],defaultSortOrder: 'descend',sorter:(a:any, b:any) => a.planPreGoodsTime.length - b.planPreGoodsTime.length},
],

上面的代码说明在table中有两列数据具有排序功能，排序功能由服务端提供，排序方式按照降序、升序的顺序依次切换。

除了上述3个属性之外，我们还需要在排序时触发chang事件。

<common-table :loading="loading" :dataSource="tableData" :columns="columns" :tableEditKey="tableEditKey" rowKey="index"
   :pagination="pagination" :scroll="scroll" @handleChange="tableItemChange">
   <template v-slot:action="slotProps">
        <div class="table_action_box">
             <a-button type="link" size="small" @click="queryClick(slotProps.record.record)"> 查看 </a-button>
        </div>
   </template>
</common-table>

tableItemChange(pagination, filters, sorter)有3个回调参数，其中跟排序相关的是sorter参数，它是一个对象，包含field、order属性，field描述当前排序的列，order描述当前排序的顺序。当处于不排序状态时，sorter对象为空
因此，我们可以通过判断当前sorter对象是否为空来判断当前的状态是否为不排序状态，并重新对其赋值并渲染，从而达到“消除”该状态的目的。

二、具体实现

根据上述的设置，目前的排序状态切换为：降序->升序->空->降序->升序->空…，为了将该顺序调整为：降序->升序->降序->升序…，首先，我们需要定义一个对象sortObj对象用于存储sorter对象的值。当sorter.order === 'descend’时，将此时的sorter赋值给sortObj，当判断出当前sorter.order为空时，即状态为不排序，将上一步存储降序状态的sortObj赋值给sorter，并重新渲染该列的排序样式，那么就能将不排序状态修改为降序状态。

 const sortObj = reactive<any>({
            sorter:{
                columnKey: "planPreGoodsTime",
                field: "planPreGoodsTime",
                order: "descend"
            }
        })
        const sortTrans = (sorter:any, index:number) => {
            for (let i = 0; i < 5; i++) {
                tableList.columns[i].sortOrder = false;
            }
            tableList.columns[index].sortOrder = sorter.order;
        }
        //分页
        const tableItemChange = (item: any) => {
            if (item.sorter.order === 'descend') {
                sortObj.sorter = {
                    columnKey:item.sorter.columnKey,
                    field:item.sorter.field,
                    order:item.sorter.order,
                }
            }
            if (!item.sorter.order) {
                item.sorter = sortObj.sorter
            }
            switch (item.sorter.field) {
                case 'planPutStockTime': 
                    sortTrans(item.sorter, 3);
                break;
                case 'planPreGoodsTime':
                    sortTrans(item.sorter, 4);
                break;
            }
            tableList.pagination.current = item.val.current
            tableList.pagination.pageSize = item.val.pageSize
            tableList.sorter.orderColumn = item.sorter.columnKey
            tableList.sorter.orderType = item.sorter.order 
            getPageList()
        }

渲染函数为sortTrans，它接收两个参数：sorter和index，index为当前列数据在columns数组中的位置。通过重新渲染当前列，并将其它排序列的sortOrder置为false，从而使每次切换排序时，都只有当前列处于排序状态。

三、总结

以上的思路可以总结为两步：

1、将值为空对象的sorter重新赋值为目标排序状态的sorter，该目标状态的sorter需要先存储下来；

2、重新赋值后，再重新渲染目标排序列的样式。