Vue3: 给表格多个字段添加排序功能

问题

  • 在Vue3项目中,使用element-plus的表格组件绘制表格后,需要令表格的多个字段可以进行选择排序(选择升序或者降序)
  • 但是排序功能好像有时候会出错,需要排序的字段多了之后,排序功能有时候会不起作用

解决

  • 给表格设置sort-method 属性,并绑定一个方法,该方法与表格的排序功能有关

在这里插入图片描述

  • 排序函数
    给数字类型的字段排序,使用减法运算符来进行数字大小排序

在这里插入图片描述

排序函数的代码:

// 表格多字段排序
function sortTable() {const { prop, order } = sortObj;return this.tableData.sort((a, b) => {if (order === "ascending") {if (prop === "study") {return a.study - b.study;} else if (prop === "visit") {return a.visit - b.visit;} else if (prop === "date") {return a.date - b.date;}} else if (order === "descending") {if (prop === "study") {return b.study - a.study;} else if (prop === "visit") {return b.visit - a.visit;} else if (prop === "date") {return b.date - a.date;}}return 0;});
}

其他

参考文章

小插曲

  • 因为在项目中,涉及到的数字比较大,所以给数字添加了分隔符:每三位数添加一个逗号;比如数字1897645,最后的呈现形式是1,897,645
  • 即数据最后的数据类型已经变成了字符串类型,但是当时在添加排序功能的时候没注意到这一点,导致排序的结果一直不对
  • 因此记录一下,仅供参考~

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

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

相关文章

分子生成领域的stable diffusion - GEOLDM

一、关于stable diffusion 很多人都知道stable diffusion,stable diffusion的出现改变了机器生成领域,让AI技术第一次无比的接近正常人。大语言模型,AIGC概念于是兴起。基于stable diffusion 大家开发了lora, hyperwork等微调技术…

JDK 9 模块化系统 (Module System) 和 多版本兼容 Jar (Multi-Release Jar)

博文目录 文章目录 Module System原因JDK 模块化模块描述文件关键字 启用模块化测试结论 Multi-Release jar (MRJAR)原因原理结论用 IDEA 创建多版本兼容 Jar项目结构pom.xml测试 Module System 原因 Java 9引入了模块化系统的主要原因是为了解决Java平台面临的复杂性和可维…

从电商API接口谈电商ERP系统介绍

部分网友反馈小红书APP出现闪退问题。对此,小红书客服微博发文称,如遇到小红书APP无法启动的情况,用户可前往App Store下载最新版本(详情可见: )小红书闪退崩溃出bug,IT人员要背故障吗&#xff…

【计算机网络实验】实验三 IP网络规划与路由设计(头歌)

目录 一、知识点 二、实验任务 三、头歌测试 一、知识点 IP子网掩码的两种表示方法 32位IP子网掩码,特点是从高位开始连续都是1,后面是连续的0,它有以下两种表示方法: 传统表示法,如:255.255.255.0IP前…

windows下oracle透明网关安装

上一次说了如何在Linux下安装oracle到sqlserver之间的透明网关,现在给大家继续介绍如何在windows下安装。 本文实验环境: 数据库类型 数据库版本 IP oracle 11204 192.168.238.122 MSSQL MSSQL 2008 192.168.239.40 一、oracle服务器配置ODBC源…

linux软件管理

八、软件管理 RPM相关命令 8.1 RPM包管理 8.1.1 RPM概述 RPM Package Manager (原Red Hat Package Manager,现在是一个递归缩写) ​ 由Red Hat公司提出,被众多 Linux 发行版所采用也称二进制( binary code) 无需编译,可以直接使用 ​ 无法设…

重磅!2023中国高校计算机大赛-人工智能创意赛结果出炉

目录 中国计算机大赛-人工智能创意赛现场C4-AI大赛颁奖及留影800个AI应用?这届大学生真能“搞事情”AI原生时代,百度要再培养500大模型人才 中国计算机大赛-人工智能创意赛现场 12月8日,杭州,一位“白发老人”突然摔倒在地&#…

Verilog学习 | 用initial语句写出固定的波形

initial beginia 0;ib 1;clk 0;#10ia 1; #20ib 0;#20ia 0; endalways #5 clk ~clk; 或者 initial clk 0;initial beginia 0;#10ia 1; #40ia 0; endinitial beginib 1;#30 ib 0; endalways #5 clk ~clk;

深入探索C语言中的二叉树:数据结构之旅

引言 在计算机科学领域,数据结构是基础中的基础。在众多数据结构中,二叉树因其在各种操作中的高效性而脱颖而出。二叉树是一种特殊的树形结构,每个节点最多有两个子节点:左子节点和右子节点。这种结构使得搜索、插入、删除等操作…

強強联手!M88明陞宣布与G2 电子竞技俱乐部成为官方合作伙伴!

M88明陞作为亚洲领先的在线游戏平台,正式宣布与G2电子竞技俱乐部建立具有突破性意义的官方合作伙伴关系,G2电子竞技俱乐部是全球领先的电子竞技品牌之一。作为官方合作伙伴关系,双方将合作开展一系列活动。 M88明陞将在G2 电子竞技俱乐部追求…

推荐4个优秀的 Python 时间序列分析库

时间序列分析在金融和医疗保健等领域至关重要,在这些领域,理解随时间变化的数据模式至关重要。在本文中,我们将介绍四个主要的Python库——statmodels、tslearn、tssearch和tsfresh——每个库都针对时间序列分析的不同方面进行了定制。这些库…

初识人工智能,一文读懂贝叶斯优化的知识文集(6)

🏆作者简介,普修罗双战士,一直追求不断学习和成长,在技术的道路上持续探索和实践。 🏆多年互联网行业从业经验,历任核心研发工程师,项目技术负责人。 🎉欢迎 👍点赞✍评论…

IDEA中配置Git

Git 在IDEA中使用Git1 在IDEA中配置Git2 在IDEA中使用Git2.1在IDEA中创建工程并将工程添加至Git2.2 将文件添加到暂存区2.3 提交文件2.4 将代码推送到远程仓库2.5 从远程仓库克隆工程到本地2.6 从远程拉取代码2.7 版本对比2.8 创建分支2.9 切换分支2.10 分支合并 3 使用IDEA进行…

【HarmonyOS开发】详解常见容器的使用

声明式UI提供了以下8种常见布局,开发者可根据实际应用场景选择合适的布局进行页面开发。 布局 应用场景 线性布局(Row、Column) 如果布局内子元素超过1个,且能够以某种方式线性排列时优先考虑此布局。 层叠布局(St…

Windows系统Java开发环境安装

总结一下Java软件开发工程师常见的环境的安装,仅限Windows环境。 以下下载链接均来自官网,网络条件自己克服。 目录 1. JDKJDK Oracle 官网下载地址配置系统环境变量 2. Mavenapache maven 官网地址本地仓库和中央仓库配置配置系统环境变量 3. GitGit 官…

Mybatis之核心配置文件详解、默认类型别名、Mybatis获取参数值的两种方式

学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博客但无从下手,急需…

Xilinx FPGA——ISE时序约束“建立时间不满足”问题解决记录

一、现象 最近使用赛灵思的FPGA设计项目时,出现时序约束失效问题。 点进去发现如下: 一个始终约束没有生效,有多处报错。 二、原因 出现这个问题的原因是,建立时间不满足。 时序违例的主要原因是建立时间和保持时间不满足要求&a…

【JAVA】黑马MybatisPlus 学习笔记【一】

1.快速入门 为了方便测试,我们先创建一个新的项目,并准备一些基础数据。 1.1 环境配置 导入项目 注意配置一下项目的JDK版本为JDK11。首先点击项目结构设置: 导入两张表,在课前资料中已经提供了SQL文件: 最后&am…