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组件 --><wTableref="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>