使用前注意

先要确认你使用的antD版本是否支持多列排序，我这里版本是3.2.15，使用的vue3 + ts。

实现效果图

实现的功能点及相关代码

1. 默认按某几个字段排序

在声明table列时指定需要默认排序的列属性sortOrder(ascend | descend)。 sorter 对象中的multiple字段用于指定多列排序时的优先级。数值越大，优先级越高。这意味着你可以通过为不同的列设置不同的 multiple值来实现多列排序，并且控制它们的排序优先级。

const columns = ref([
    {
        title: 'ID',
        dataIndex: 'id',
        sorter: {
            multiple: 1,
        },
    },
    {
        title: '设备名称',
        dataIndex: 'name',
        sortOrder: 'descend',
        sorter: {
            multiple: 2,
        },
    },
    {
        title: '产品名称',
        dataIndex: 'productName',
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        scopedSlots: true,
        width: 200,
        sortOrder: 'descend',
        sorter: {
            multiple: 3,
        },
    },
    {
        title: '状态',
        dataIndex: 'state',
        scopedSlots: true,
    },
    {
        title: '说明',
        dataIndex: 'describe',
    },
    {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
        width: 200,
        scopedSlots: true,
    },
]);

2. 点击排序按钮可同时对多个字段进行排序

table组件绑定的方法`@change="onChange"`


/**
 * onChange方法实现：
 * 处理的都是columns这个数据源
 * 首先判断是单列还是多列排序：
 * 1. 若是多列同时排序，sorter为Array，map处理数据结构后，拿到需要排序数据与table列[columns]匹配，匹配到的给当前列字段的排序状态赋值
 * 2. 若是单列排序，sorter为Object，直接对匹配到的列赋值。
 * change方法会触发table的查询方法（给接口传的参数在table的查询方法中处理）
 */
const onChange = (pagination, filters, sorter, extra) => {
    if (Object.prototype.toString.call(sorter) === '[object Array]') {
        let sorterData = sorter.map((item) => {
            return {
                field: item.field,
                order: item.order,
            };
        });

        columns.value.map((column) => {
            column.sortOrder = undefined;
            sorterData.find((item) => {
                if (item.field === column.dataIndex) {
                    column.sortOrder = item.order;
                }
            });
        });
    } else {
        columns.value.forEach((item) => {
            item.sortOrder = undefined;
            if (item.dataIndex === sorter.field) {
                item.sortOrder = sorter.order;
            }
        });
    }
};

3. 点击重置按钮可恢复默认排序状态。

/**
 * 1. 查询和重置调用一个方法，在重置emit触发该方法时多传一个参数resetFlag为true
 * 2. 重置时将排序字段修改为需要默认排序字段，方法resetSort
 */
const handleSearch = (_params: any) => {
    // 对要排序的数据组合为后端接口想要的格式[{name: "XXX", order: 'XXX'}]
    let sortsParams = columns.value
        .filter((item) => item.sortOrder)
        .map((item) => ({
            name: item.dataIndex,
            order:
                item.sortOrder === 'descend'
                    ? 'desc'
                    : item.sortOrder === 'ascend'
                    ? 'asc'
                    : '',
        }));

    params.value = {
        sorts: sortsParams,
    };
    if (_params?.resetFlag) {
        resetSort();
    }
};

/**
 * 重置方法
 * 重置时匹配需要重置的列，将当前列sortOrder属性置为需要默认排序值（我这里默认按创建时间和名称倒序）
 */
const resetSort = () => {
    columns.value.forEach((column) => {
        column.sortOrder = undefined; // 取消所有字段排序
        if (column.dataIndex === 'createTime' || column.dataIndex === 'name') {
            column.sortOrder = 'descend';
        }
    });
};

功能实现完整的关键代码

<template>
    <!-- 上面查询区-代码省略 -->
    <!-- wTable为封装的table组件 -->
    <wTable
        ref="wTableRef"
        :columns="columns"
        :request="query"
        :params="params"
        @change="onChange"
    >
        <!-- 中间省略一些插槽代码 -->
        <!-- 
            上面属性的简单介绍：
            columns：展示的table列
            request: 查询/查询时table数据请求的接口
            params： 查询条件参数与排序字段相关参数
         -->
    </wTable>
</template>
<script setup lang="ts" name="Instance">
import { query } from '@/api/XXX';
const params = ref<Record<string, any>>({});
const columns = ref([
    {
        title: 'ID',
        dataIndex: 'id',
        sorter: {
            multiple: 1,
        },
    },
    {
        title: '设备名称',
        dataIndex: 'name',
        sortOrder: 'descend',
        sorter: {
            multiple: 2,
        },
    },
    {
        title: '产品名称',
        dataIndex: 'productName',
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        scopedSlots: true,
        width: 200,
        sortOrder: 'descend',
        sorter: {
            multiple: 3,
        },
    },
    {
        title: '状态',
        dataIndex: 'state',
        scopedSlots: true,
    },
    {
        title: '说明',
        dataIndex: 'describe',
    },
    {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
        width: 200,
        scopedSlots: true,
    },
]);

const onChange = (pagination, filters, sorter, extra) => {
    if (Object.prototype.toString.call(sorter) === '[object Array]') {
        let sorterData = sorter.map((item) => {
            return {
                field: item.field,
                order: item.order,
            };
        });

        columns.value.map((column) => {
            column.sortOrder = undefined;
            sorterData.find((item) => {
                if (item.field === column.dataIndex) {
                    column.sortOrder = item.order;
                }
            });
        });
    } else {
        columns.value.forEach((item) => {
            item.sortOrder = undefined;
            if (item.dataIndex === sorter.field) {
                item.sortOrder = sorter.order;
            }
        });
    }
};

const handleSearch = (_params: any) => {
    let sortsParams = columns.value
        .filter((item) => item.sortOrder)
        .map((item) => ({
            name: item.dataIndex,
            order:
                item.sortOrder === 'descend'
                    ? 'desc'
                    : item.sortOrder === 'ascend'
                    ? 'asc'
                    : '',
        }));

    params.value = {
        sorts: sortsParams,
    };
    if (_params?.resetFlag) {
        resetSort();
    }
};

const resetSort = () => {
    columns.value.forEach((column) => {
        column.sortOrder = undefined; 
        if (column.dataIndex === 'createTime' || column.dataIndex === 'name') {
            column.sortOrder = 'descend';
        }
    });
};
</script>