antd-vue - - - - - a-table排序

antd-vue - - - - - a-table排序

  • 1. 重点代码:
  • 2. 代码示例:
  • 3. 进阶版写法

1. 重点代码:

sorter: {compare: (a, b) => a.columnsKeys - b.columnsKeys,multiple: 1,
},

解析:
compare: 自定义排序函数,用于比较两个对象。
multiple: 排序优先级权重(数字越大优先级越高)。

2. 代码示例:

<template><a-table :columns="columns" :data-source="data" @change="onChange" />
</template>
<script setup>
const columns = [{title: 'Name',dataIndex: 'name',},{title: 'Chinese Score',dataIndex: 'chinese',sorter: {compare: (a, b) => a.chinese - b.chinese,multiple: 3,},},{title: 'Math Score',dataIndex: 'math',sorter: {compare: (a, b) => a.math - b.math,multiple: 2,},},{title: 'English Score',dataIndex: 'english',sorter: {compare: (a, b) => a.english - b.english,multiple: 1,},},
];
const data = [{key: '1',name: 'John Brown',chinese: 98,math: 60,english: 70,type1: 1,type2: 'star',type3: '张三',},{key: '2',name: 'Jim Green',chinese: 98,math: 66,english: 89,type1: 2,type2: 'moon',type3: '李四',},{key: '3',name: 'Joe Black',chinese: 98,math: 90,english: 70,type1: 3,type2: 'sun',type3: '王五',},
];
function onChange(pagination, filters, sorter, extra) {// 监听表格变化事件,比如分页、排序、过滤等(回调函数)console.log('params', pagination, filters, sorter, extra);
}
</script>

上述代码,分别对chinese、math、english三列设置了排序。

  • multiple的值设置的不一样,数值越大,优先级越高。
  • 比如同时对三列都进行排序,先满足chinese的筛选条件,再满足math的筛选条件,再满足english的筛选条件

3. 进阶版写法

当排序的列类型不仅仅为数字类型时,排序就会出现混乱。解决办法就是针对不同类型,设置不同的compare。

columns.map(col => {if (['type1'].includes(col.dataIndex)) {// 数值型字段排序return {...col,sorter: {compare:(a, b) => Number(a[col.dataIndex]) - Number(b[col.dataIndex]),multiple: 1}};} else if (['type2'].includes(col.dataIndex)) {// 字符串字段排序return {...col,sorter: (a, b) => a[col.dataIndex].localeCompare(b[col.dataIndex]),};} else {// 默认处理:假设其他列都可以按照字符串比较来排序return {...col,sorter: (a, b) => ('' + a[col.dataIndex]).localeCompare('' + b[col.dataIndex]),};}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/news/909027.shtml

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

相关文章

【AI】模型vs算法(以自动驾驶为例)

模型vs算法&#xff08;以自动驾驶为例&#xff09; 一、自动驾驶的核心任务二、以自动驾驶为例&#xff0c;模型vs算法的实际分工1. 感知环节&#xff1a;“看懂”周围环境&#xff08;如识别行人、车道线、车辆&#xff09;2. 预测环节&#xff1a;“预判”其他交通参与者的行…

机器学习与深度学习19-线性代数02

目录 前文回顾6.协方差矩阵与主成分分析7.矩阵的奇异值分解8.神经网络的前向传播和反向传播9.矩阵的迹10.特征工程的多项式特征扩展 前文回顾 上一篇文章链接&#xff1a;地址 6.协方差矩阵与主成分分析 协方差矩阵是一个对称矩阵&#xff0c;用于衡量随机变量之间的线性相关…

青藏高原ASTER_GDEM数据集(2011)

共享方式&#xff1a;开放获取数据大小&#xff1a;73.69 GB数据时间范围&#xff1a;2012-04-08 — 2012-05-08元数据更新时间&#xff1a;2021-10-15 数据集摘要 ASTER Global Digital Elevation Model &#xff08;ASTER GDEM&#xff09;是美国航空航天局 &#xff08;NAS…

代码随想录训练营二十六天| 654.最大二叉树 617.合并二叉树 700.二叉搜索树的搜索 98.验证二叉搜索树

654.最大二叉树&#xff1a; 文档讲解&#xff1a;代码随想录|654.最大二叉树 视频讲解&#xff1a;又是构造二叉树&#xff0c;又有很多坑&#xff01;| LeetCode&#xff1a;654.最大二叉树_哔哩哔哩_bilibili 状态&#xff1a;已做出 思路&#xff1a; 这道题目要求使用给定…

临时抱佛脚v2

术语解释 多范式 (Multi-paradigm) 指支持多种编程范式&#xff0c;如面向对象编程和函数式编程&#xff0c;允许开发者根据需求选择最合适的风格。 函数式编程 (Functional Programming) 一种编程范式&#xff0c;将计算视为数学函数的求值&#xff0c;强调不变性、无副作用…

MCGS和1200plc变量表格式编辑

设备编辑窗口---设备信息导出---另存为xx.CSV文件 在上面导出的表格基础上编辑 本体位的编辑&#xff1a; db数据块位编辑 db数据块int类型 (4.14应改为4.140,0不省略) db数据块real类型 通道号&#xff0c;地址均按顺序排列 &#xff0c;寄存期地址最后一位0不能省略&#…

Android高性能音频与图形开发:OpenSL ES与OpenGL ES最佳实践

引言 在移动应用开发中&#xff0c;音频和图形处理是提升用户体验的关键要素。本文将深入探讨Android平台上两大核心多媒体API&#xff1a;OpenSL ES&#xff08;音频&#xff09;和OpenGL ES&#xff08;图形&#xff09;&#xff0c;提供经过生产环境验证的优化实现方案。 …

GaussDB分布式数据库调优方法总结:从架构到实践的全链路优化指南

GaussDB分布式数据库调优方法总结&#xff1a;从架构到实践的全链路优化指南 GaussDB作为华为自主研发的分布式数据库&#xff0c;基于MPP&#xff08;大规模并行处理&#xff09;架构设计&#xff0c;支持存储与计算分离、列存/行存混合引擎、向量化执行等核心技术&#xff0…

NLP学习路线图(三十九):对话系统

在人工智能领域,自然语言处理(NLP)无疑是推动人机交互革命的核心引擎。当清晨的闹钟响起,你轻声一句“小爱同学,关掉闹钟”;当开车迷路时说“嘿Siri,导航到最近加油站”;当深夜向客服机器人询问订单状态时——我们已在不知不觉中与对话系统建立了千丝万缕的联系。这类系…

Cambridge Pixel为警用反无人机系统(C-UAS)提供软件支持

警用 C-UAS 系统受益于 Cambridge Pixel 和 OpenWorks Engineering 的技术合作。 作为雷达数据处理和雷达目标跟踪的专家公司&#xff0c;Cambridge Pixel宣布与OpenWorks Engineering 合作&#xff0c;为警用系统提供先进的C-UAS系统。OpenWorks Engineering以创新的光学系统和…

【ArcGIS Pro微课1000例】0072:如何自动保存编辑内容及保存工程?

文章目录 一、自动保存编辑内容二、自动保存工程在使用ArcGIS或者ArcGIS Pro时,经常会遇到以下报错,无论点击【发送报告】,还是【不发送】,软件都会强制退出,这时如果对所操作没有保存,就会前功尽弃。 此时,自动保存工作就显得尤为重要,接下来讲解两种常见的自动保存方…

进行性核上性麻痹健康护理指南:全方位照护之道

进行性核上性麻痹&#xff08;PSP&#xff09;是一种罕见的神经系统变性疾病&#xff0c;会严重影响患者的生活质量。做好健康护理&#xff0c;能在一定程度上缓解症状&#xff0c;提高患者生活质量。 ​饮食护理是基础。患者常伴有吞咽困难&#xff0c;饮食应选择质地均匀、易…

第二节:Vben Admin v5 (vben5) Python-Flask 后端开发详解(附源码)

目录 前言项目准备项目结构应用创建应用工厂`vben5-admin-backend/app/__init__.py` 文件`vben5-admin-backend/app/config.py` 文件`vben5-admin-backend/app/.env` 文件`vben5-admin-backend/app/logging_config.py` 文件`vben5-admin-backend/app/start.py` 文件`vben5-admi…

从零打造前沿Web聊天组件:从设计到交互

作者现在制作一款网页端聊天室&#xff08;青春版&#xff09;&#xff0c;之前一直有这个想法&#xff0c;现在总算是迈出了第一步开始制作了… 雄关漫道真如铁&#xff0c;而今迈步从头越&#xff01; 启程 当前已经完成左侧聊天室列表显示&#xff0c;通过http://localhos…

计算机网络 : 传输层协议UDP与TCP

计算机网络 &#xff1a; 传输层协议UDP与TCP 目录 计算机网络 &#xff1a; 传输层协议UDP与TCP引言1. 传输层协议UDP1.2 UDP协议段格式1.3 UDP的特点1.4 面向数据报1.5 UDP的缓冲区1.6 基于UDP的应用层协议及使用注意事项 2. 传输层协议TCP2.1 再谈端口号2.2 TCP协议段格式2.…

Java高频面试之并发编程-27

hello啊&#xff0c;各位观众姥爷们&#xff01;&#xff01;&#xff01;本baby今天又来报道了&#xff01;哈哈哈哈哈嗝&#x1f436; 面试&#xff1a;详细说说AtomicInteger 的原理 AtomicInteger 的原理详解 AtomicInteger 是 Java 并发包 (java.util.concurrent.atomic)…

冒险岛的魔法果实-多重背包

问题描述 在冒险岛的深处&#xff0c;小萌探索到了一个传说中的魔法果实园。这里满是各种神奇的魔法果实&#xff0c;吃了可以增加不同的魔法能量。 小萌想带一些魔法果实回去&#xff0c;但是他的背包空间有限。看着这些琳琅满目的魔法果实&#xff0c;小萌很是纠结&#xf…

atomicity of memory accesses

文章目录 atomicity of memory accesses✅ 正确认识原子性的边界对于 **Load**&#xff1a;✅ 正确的原子性边界是&#xff1a;对于 **Store**&#xff1a;✅ 正确的原子性边界是&#xff1a; &#x1f504; 修正原文中的说法&#xff08;对照分析&#xff09;✅ 原子性边界最终…

VScode安装配置PYQT6

开始是准备安装PYQT5的&#xff0c;但是安装不下去&#xff0c;就改成安装PYQT6 一.安装pyqt5&#xff0c;成功。 c:\PYQT>pip install pyqt5 Defaulting to user installation because normal site-packages is not writeable Collecting pyqt5 Downloading PyQt5-5.15.…

SpringBoot使用oshi获取服务器相关信息

概念 OSHI是Java的免费基于JNA的&#xff08;本机&#xff09;操作系统和硬件信息库。它不需要安装任何其他本机库&#xff0c;并且旨在提供一种跨平台的实现来检索系统信息&#xff0c;例如操作系统版本&#xff0c;进程&#xff0c;内存和CPU使用率&#xff0c;磁盘和分区&a…