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

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.mzph.cn/diannao/61495.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp 修改网页标题title

方式一:配置所有页面统一标题navigationBarTitleText.(优先级最低),位置:pages.json "globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "跃玩生活",// "navigationBarBackgroundColor&q…

CSV文件数据导入hive

一、加载CSV文件数据到hive表步骤&#xff1a; 1、Hive上建表&#xff0c;通常会指定字段分隔符为逗号&#xff08;row format delimited fields terminated by ‘,’ &#xff09; 2、导入CSV文件 二、实操 以csv 文件中出现字段中含有逗号的场景为例&#xff1a;{“2020”…

【华为】配置VXLAN构建虚拟网络实现相同网段互通(静态方式)

微思网络 厦门微思网络 组网需求 企业已经建成比较成熟的园区网络&#xff0c;但是没有专用的数据中心网络&#xff0c;所有的服务器分布在不同的部门&#xff0c;并且不具备集中放置的条件。现在用户希望在已有园区网络上构建一个虚拟网络&#xff0c;需求如下&#xff1a; 将…

神经网络问题之:梯度不稳定

梯度不稳定是深度学习中&#xff0c;特别是在训练深度神经网络时常见的一个问题&#xff0c;其本质涉及多个方面。 一、根本原因 梯度不稳定问题的根本原因在于深度神经网络的结构和训练过程中的一些固有特性。随着网络层数的增加&#xff0c;梯度在反向传播过程中会逐层累积变…

AI工具百宝箱|任意选择与Chatgpt、gemini、Claude等主流模型聊天的Anychat,等你来体验!

文章推荐 AI工具百宝箱&#xff5c;使用Deep Live Cam&#xff0c;上传一张照片就可以实现实时视频换脸...简直太逆天&#xff01; Anychat 这是一款可以与任何模型聊天 &#xff08;chatgpt、gemini、perplexity、claude、metal llama、grok 等&#xff09;的应用。 在页面…

Bufferevent and SSL

bufferevent可以使用OpenSSL库实现SSL/TLS安全传输层。因为很多应用不需要或者不想链接OpenSSL&#xff0c;这部分功能在单独的libevent_openssl库中实现。未来版本的libevent可能会添加其他SSL/TLS库&#xff0c;如NSS或者GnuTLS&#xff0c;但是当前只有OpenSSL。 OpenSSL功能…

云原生之k8s服务管理

文章目录 服务管理Service服务原理ClusterIP服务 对外发布应用服务类型NodePort服务Ingress安装配置Ingress规则 Dashboard概述 认证和授权ServiceAccount用户概述创建ServiceAccount 权限管理角色与授权 服务管理 Service 服务原理 容器化带来的问题 自动调度&#xff1a;…

Kafka 工作流程解析:从 Broker 工作原理、节点的服役、退役、副本的生成到数据存储与读写优化

Kafka&#xff1a;分布式消息系统的核心原理与安装部署-CSDN博客 自定义 Kafka 脚本 kf-use.sh 的解析与功能与应用示例-CSDN博客 Kafka 生产者全面解析&#xff1a;从基础原理到高级实践-CSDN博客 Kafka 生产者优化与数据处理经验-CSDN博客 Kafka 工作流程解析&#xff1a…

GitLab|数据迁移

注意&#xff1a;新服务器GitLab版本需和旧版本一致 在旧服务器执行命令进行数据备份 gitlab-rake gitlab:backup:create 备份数据存储在 /var/opt/gitlab/backups/ 将备份数据传输到新服务器的/var/opt/gitlab/backups/下&#xff0c;并修改文件权限&#xff08;下载前和上传…

开源项目低代码表单设计器FcDesigner获取表单的层级结构与组件数据

在使用开源项目低代码表单设计器FcDesigner时&#xff0c;获取和理解表单的层级结构非常关键。通过getDescription和getFormDescription方法&#xff0c;您可以清晰掌握表单组件的组织结构和层次关系。这些方法为操控表单的布局和配置提供了强大的支持。 源码地址: Github | G…

HDMI数据传输三种使用场景

视频和音频的传输 在HDMI传输音频中有3种方式进行传输&#xff0c;第一种将音频和视频信号被嵌入到同一数据流中&#xff0c;通过一个TMDS&#xff08;Transition Minimized Differential Signaling&#xff09;通道传输。第二种ARC。第三张种eARC。这三种音频的传输在HDMI线中…

2025计算机毕设选题精选推荐【小程序方向】

2025计算机毕设选题精选推荐【小程序方向】 计算机专业的毕业设计是学生们在学术生涯中的一个重要里程碑&#xff0c;选题的好坏直接影响到毕业设计的质量和后续的职业发展。随着移动互联网和数字化服务的快速发展&#xff0c;小程序作为一种轻便、快捷的开发形式&#xff0c;…

OpenCV:计算机视觉的瑞士军刀

目录 引言 什么是OpenCV&#xff1f; OpenCV的主要特点 OpenCV的应用领域 如何开始使用OpenCV OpenCV基础代码示例 图像读取和显示 简单的图像处理 边缘检测 人脸识别 深入探索OpenCV 特征检测和描述 图像分割 视频处理 深度学习与OpenCV 结语 引言 OpenCV&am…

解决IDEA中Maven管理界面不是层级结构的问题

文章目录 0. 前言1. 点击Maven管理界面右上角的三个点2. 勾选将模块分组3. 分组后的层级结构 更多 IDEA 的使用技巧可查看 IDEA 专栏中的文章&#xff1a;IDEA 0. 前言 在 IDEA 中&#xff0c;如果项目中有很多子模块&#xff0c;每个子模块中又有一个或多个子模块时&#xf…

datawhale11月组队学习 模型压缩技术2:PyTorch模型剪枝教程

文章目录 一、 prune模块简介1.1 常用方法1.2 剪枝效果1.3 二、三、四章剪枝测试总结 二、局部剪枝&#xff08;Local Pruning&#xff09;2.1 结构化剪枝2.1.1 对weight进行随机结构化剪枝&#xff08;random_structured&#xff09;2.1.2 对weight进行迭代剪枝&#xff08;范…

GPT1.0 和 GPT2.0 的联系与区别

随着自然语言处理技术的飞速发展&#xff0c;OpenAI 提出的 GPT 系列模型成为了生成式预训练模型的代表。作为 GPT 系列的两代代表&#xff0c;GPT-1 和 GPT-2 虽然在架构上有着继承关系&#xff0c;但在设计理念和性能上有显著的改进。本文将从模型架构、参数规模、训练数据和…

Java-06 深入浅出 MyBatis - 一对一模型 SqlMapConfig 与 Mapper 详细讲解测试

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 大数据篇正在更新&#xff01;https://blog.csdn.net/w776341482/category_12713819.html 目前已经更新到了&#xff1a; MyBatis&#xff…

css使用弹性盒,让每个子元素平均等分父元素的4/1大小

css使用弹性盒&#xff0c;让每个子元素平均等分父元素的4/1大小 原本&#xff1a; ul {padding: 0;width: 100%;background-color: rgb(74, 80, 62);display: flex;justify-content: space-between;flex-wrap: wrap;li {/* 每个占4/1 */overflow: hidden;background-color: r…

佛山三水戴尔R740服务器黄灯故障处理

1&#xff1a;佛山三水某某大型商场用户反馈一台DELL PowerEdge R740服务器近期出现了黄灯警告故障&#xff0c;需要冠峰工程师协助检查故障灯原因。 2&#xff1a;工程师协助该用户通过笔记本网线直连到服务器尾部的IDRAC管理端口&#xff0c;默认ip 192.168.0.120 密码一般在…

视频对接rtsp协议学习

RTSP协议在视频平台中的应用‌ RTSP&#xff08;Real Time Streaming Protocol&#xff09;是一种基于TCP/IP的应用层协议&#xff0c;主要用于控制流媒体数据的传输和播放。它通过定义一系列命令和请求&#xff0c;实现对流媒体服务器的远程控制&#xff0c;但不传输媒体数据…