antD中table组件多列排序
- 使用前注意
- 实现效果图
- 实现的功能点及相关代码
- 1. 默认按某几个字段排序
- 2. 点击排序按钮可同时对多个字段进行排序
- 3. 点击重置按钮可恢复默认排序状态。
- 功能实现完整的关键代码
使用前注意
先要确认你使用的
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>
