ant-design-vue中table组件多列排序

ops/2024/11/22 19:44:50/

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>

http://www.ppmy.cn/ops/135869.html

相关文章

微信小程序02-页面制作

微信小程序页面制作指南 目录 微信小程序页面制作 1. 个人信息展示小程序 案例分析 需求背景&#xff1a;许多大学生毕业后需要求职&#xff0c;因此制作一个展示个人信息的微信小程序对招聘人员快速了解求职者非常有帮助。页面布局&#xff1a;页面分为头像区域和详细信息…

智能工厂的设计软件 为了监管控一体化的全能Supervisor 的监督学习 之 序7 进化论及科学的信息技术创新:分布式账本/区块链/智能合约

Q&A Q46、 聊聊“分布式账本”“区块链”和“智能合约” “分布式账本”、“区块链”和“智能合约”是现代信息技术领域的几个重要概念&#xff0c;它们在金融、供应链管理、物联网等多个领域都发挥着重要作用。以下是对这三个概念的详细解析&#xff1a; 分布式账本 …

数据分析-49-时间序列信息编码之采用虚拟变量

文章目录 1 基本概念1.1 虚拟变量(one-hot)1.2 时间特征2 模拟数据2.1 日期序列2.2 目标序列3 编码虚拟变量(one-hot)3.1 年份编码3.2 月份编码3.3 星期几编码4 拟合模型4.1 构建数据集(每月编码)4.2 构建数据集(每日编码)5 参考附录1 基本概念 1.1 虚拟变量(one-hot) 虚拟变…

修改this.$confirm的按钮位置、图标、文字及标题

在Vue.js项目中&#xff0c;this.$confirm 通常是基于某些UI库&#xff08;如Element UI或Ant Design Vue&#xff09;的对话框确认方法。 以下是基于Element UI的this.$confirm的用法示例。 在此之前&#xff0c;你的项目要已经安装了Element UI&#xff0c;如果没安装话就打…

C++结构型设计模式所体现面向接口设计的特征和优点

结构型设计模式&#xff08;Structural Patterns&#xff09;在面向接口设计方面体现了一系列重要的特征&#xff0c;这些特征帮助我们构建灵活、可扩展和易于维护的系统。以下是结构型设计模式在面向接口设计方面的特征及其优点&#xff1a; 1. 接口分离和抽象化 特征 结构…

Python进阶学习路线与未来就业前景

Python进阶学习路线与未来就业前景 Python作为一种语法简洁、易于理解和学习的编程语言&#xff0c;近年来在编程语言排行榜中持续攀升&#xff0c;尤其在人工智能领域的广泛应用下&#xff0c;更是备受瞩目。本文将为读者介绍Python进阶的学习路线以及各个学习方向的未来就业…

141. Sprite标签(Canvas作为贴图)

上节课案例创建标签的方式&#xff0c;是把一张图片作为Sprite精灵模型的颜色贴图,本节给大家演示把Canvas画布作为Sprite精灵模型的颜色贴图&#xff0c;实现一个标签。 注意&#xff1a;本节课主要是技术方案讲解&#xff0c;默认你有Canvas基础&#xff0c;如果没有Canvas基…

H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连

EasyPlayer.js无插件H5播放器属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;无须安装任何插件&#xff0c;起播快、延迟低、兼容性强&#xff0c;使用非常便捷。 EasyPlayer.js播放器不仅支持H.264与H.265视频编码格式&#x…