解决elementUI列表的疑难杂症,排序显示错乱的问题

  大家好,在使用elementUI表格时,有时会出现一些意料之外的问题,比如数据排序正常但表格显示、排序错乱等。在网上搜索后一般有2种解决方法:1.给表格每一项的el-table-column添加唯一的id用于区分。2.给表格每一项的el-table-column添加唯一的key用于区分。
<el-table-columnprop="id"label="序号"min-width="50":key="10001"></el-table-column>
<el-table-column prop="name" label="名称" min-width="80" :key="10002"><template slot-scope="scope"><div>{{ scope.row.name || "—" }}</div></template>
</el-table-column>
<el-table-column prop="number" label="数量" min-width="80" :key="10003"><template slot-scope="scope"><div>{{ scope.row.number || 0 }}</div></template>
</el-table-column><el-table-column prop="percentage" label="百分比" min-width="80" :key="10002" id="percentage" :sort-method="(a,b)=>{return a.percentage - b.percentage}" sortable><template slot-scope="{}" slot="header"><span>百分比</span><el-popoverpopper-class="my-el-popover"placement="right-start"title=""width="200"trigger="hover"content="这里是百分比"><spanclass="tip-div" slot="reference"><i class="el-icon-question tip-icon"></i></span></el-popover></template><template slot-scope="scope"><div class="nowColor">{{ scope.row.percentage }}%</div></template></el-table-column>
以上2种方法大多数时候可以奏效,一旦列表使用了复杂数据的排序,以上2种方法便会失效,比如百分比排序。

查询elementUI官方文档发现,列表排序会使用elementUI默认的排序,可能与开发者想要的效果不一致。
解决方法是使用自定义的排序方法:sort-method
关键代码如下:
使用自定义排序方法 :sort-method=“(a,b)=>{return a.percentage - b.percentage}” sortable

<el-table-column prop="percentage" label="百分比" min-width="80" :key="10002" id="percentage" :sort-method="(a,b)=>{return a.percentage - b.percentage}" sortable></el-table-column>

测试数据如下(可复制查看效果)

this.tableData = [{id: 1,name: "测试1号",number: 19,percentage: 52.01,rank: 49,rankRate: 81.29
}, {id: 2,name: "测试2号",number: 11,percentage: 42.01,rank: 11,rankRate: 42.01
}, {id: 3,name: "测试3号",number: 1,percentage: 2.01,rank: 1,rankRate: 2.01
}]

效果图如下:
效果图示例
最后,原创不易,如本文对您有所帮助,麻烦一键三连点个赞谢谢!

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

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

相关文章

案例 | 人大金仓助力山西政务服务核心业务系统实现全栈国产化升级改造

近日&#xff0c;人大金仓支撑山西涉企政策服务平台、政务服务热线联动平台、政务网、办件中心等近30个政务核心系统完成全栈国产化升级改造&#xff0c;推进全省通办、跨省通办、综合业务受理、智能审批、一件事一次办等业务的数字化办结进程&#xff0c;为我国数字政务服务提…

mybatis语法进阶1

日志的使用 我们在使用MyBatis的时候, 其实MyBatis框架会打印一些必要的日志信息, 在开发阶段这些日志信息对我们分析问题,理解代码的执行是特别有帮助的; 包括项目上线之后,我们也可以收集项目的错误日志到文件里面去; 所以我们采用专门的日志系统来处理. 步骤 导入坐标拷贝…

如何在SpringCloud中使用Kafka Streams实现实时数据处理

使用Kafka Streams在Spring Cloud中实现实时数据处理可以帮助我们构建可扩展、高性能的实时数据处理应用。Kafka Streams是一个基于Kafka的流处理库&#xff0c;它可以用来处理流式数据&#xff0c;进行流式计算和转换操作。 下面将介绍如何在Spring Cloud中使用Kafka Streams实…

pytorch说明

深度学习中的重要概念&#xff1a; 激活函数&#xff1a; 激活函数的必要性&#xff1a;激活函数不是绝对必须的&#xff0c;但在深度学习中&#xff0c;它们几乎总是被使用。激活函数可以引入非线性&#xff0c;这使得神经网络能够学习更复杂的模式。 激活函数的位置&#x…

记录些MySQL题集(9)

MySQL之死锁问题分析、事务隔离与锁机制的底层原理剖析 一、MySQL中的死锁现象 所谓的并发事务&#xff0c;本质上就是MySQL内部多条工作线程并行执行的情况&#xff0c;也正由于MySQL是多线程应用&#xff0c;所以需要具备完善的锁机制来避免线程不安全问题的问题产生&#…

嵌入式智能手表项目实现分享

简介 这是一个基于STM32F411CUE6和FreeRTOS和LVGL的低成本的超多功能的STM32智能手表~ 推荐 如果觉得这个手表的硬件难做,又想学习相关的东西,可以试下这个新出的开发板,功能和例程demo更多!FriPi炸鸡派STM32F411开发板: 【STM32开发板】 FryPi炸鸡派 - 嘉立创EDA开源硬件平…

STM32入门开发操作记录(二)——LED与蜂鸣器

目录 一、工程模板二、点亮主板1. 配置寄存器2. 调用库函数 三、LED1. 闪烁2. 流水灯 四、蜂鸣器 一、工程模板 参照第一篇&#xff0c;新建工程目录ProjectMould&#xff0c;将先前打包好的Start&#xff0c;Library和User文件^C^V过来&#xff0c;并在Keil5内完成器件支持包的…

【ARM】CCI集成指导整理

目录 1.CCI集成流程 2.CCI功能集成指导 2.1CCI结构框图解释 Request concentrator Transaction tracker Read-data Network Write-data Network B-response Network 2.2 接口注意项 记录一下CCI500的ACE slave interface不支持的功能&#xff1a; 对于ACE-Lite slav…

手机和电脑通过TCP传输(一)

一.工具 手机端&#xff1a;网络调试精灵 电脑端&#xff1a;野火网络调试助手 在开始通信之前&#xff0c;千万要查看一下电脑的防火墙是否关闭&#xff0c;否则可能会无法通信 在开始通信之前&#xff0c;千万要查看一下电脑的防火墙是否关闭&#xff0c;否则可能会无法通信…

vue3+TS从0到1手撸后台管理系统

1.路由配置 1.1路由组件的雏形 src\views\home\index.vue&#xff08;以home组件为例&#xff09; 1.2路由配置 1.2.1路由index文件 src\router\index.ts //通过vue-router插件实现模板路由配置 import { createRouter, createWebHashHistory } from vue-router import …

【学习笔记】无人机系统(UAS)的连接、识别和跟踪(一)-3GPP TS 23.256 技术规范概述

3GPP TS 23.256 技术规范&#xff0c;主要定义了3GPP系统对无人机&#xff08;UAV&#xff09;的连接性、身份识别、跟踪及A2X&#xff08;Aircraft-to-Everything&#xff09;服务的支持。 3GPP TS 23.256 技术规范&#xff1a; 以下是文档的核心内容总结&#xff1a; UAV系…

类和对象的简述(c++篇)

开局之前&#xff0c;先来个小插曲&#xff0c;放松一下&#xff1a; 让我们的熊二来消灭所有bug 各位&#xff0c;在这祝我们&#xff1a; 放松过后&#xff0c;开始步入正轨吧。爱学习的铁子们&#xff1a; 目录&#xff1a; 一类的定义&#xff1a; 1.简述&#xff1a; 2…

【Springboot】新增profile环境配置应用启动失败

RT 最近接手了一个新的项目&#xff0c;为了不污染别人的环境&#xff0c;我新增了一个自己的环境配置。结果&#xff0c;在启动的时候总是失败&#xff0c;就算是反复mvn clean install也是无效。 问题现象 卡住无法进行下一步 解决思路 由于之前都是能启动的&#xff0c…

Spring Boot项目的404是如何发生的

问题 在日常开发中&#xff0c;假如我们访问一个Sping容器中并不存在的路径&#xff0c;通常会返回404的报错&#xff0c;具体原因是什么呢&#xff1f; 结论 错误的访问会调用两次DispatcherServlet&#xff1a;第一次调用无法找到对应路径时&#xff0c;会给Response设置一个…

SpringBoot使用开发环境的application.properties

在Spring Boot项目中&#xff0c;application.properties 或 application.yml 文件是用于配置应用程序外部属性的重要文件。这些文件允许定制你的应用&#xff0c;而无需更改代码。根据不同的运行环境&#xff0c;可以通过创建以application-{profile}.properties格式命名的文件…

MMFewshot框架少样本目标检测配置学习(二)

教程 0&#xff1a;MMFEWSHOT 检测概述 在 MMFewShot 中&#xff0c;有三个用于获取数据的重要组件&#xff1a; Datasets&#xff1a;ann_cfg从少数镜头设置中加载注释并过滤图像和注释。 Dataset Wrappers&#xff1a;确定采样逻辑&#xff0c;例如根据查询图像采样支持图像…

<Rust>egui部件学习:如何在窗口及部件显示中文字符?

前言 本专栏是关于Rust的GUI库egui的部件讲解及应用实例分析&#xff0c;主要讲解egui的源代码、部件属性、如何应用。 环境配置 系统&#xff1a;windows 平台&#xff1a;visual studio code 语言&#xff1a;rust 库&#xff1a;egui、eframe 概述 本文是本专栏的第一篇博…

2024-07-16 Unity插件 Odin Inspector5 —— Conditional Attributes

文章目录 1 说明2 条件特性2.1 DisableIf / EnableIf2.2 DisableIn / EnableIn / ShowIn / HideIn2.3 DisableInEditorMode / HideInEditorMode2.4 DisableInInlineEditors / ShowInInlineEditors2.5 DisableInPlayMode / HideInPlayMode2.6 ShowIf / HideIf2.7 ShowIfGroup / …

鸿蒙架构之AOP

零、主要内容 AOP 简介ArkTs AOP 实现原理 JS 原型链AOP实现原理 AOP的应用场景 统计类&#xff1a; 方法调用次数统计、方法时长统计防御式编程&#xff1a;参数校验代理模式实现 AOP的注意事项 一、AOP简介 对于Android、Java Web 开发者来说&#xff0c; AOP编程思想并不…

java智慧工地云平台源码,基于BIM+AI智能大数据中心和云平台的智慧工地监管平台

智慧工地云平台源码&#xff0c;智慧工地系统源码&#xff0c;工程管理系统APP源码&#xff0c; “智慧工地”基于BIM&#xff08;建筑信息模型&#xff09;AI&#xff08;人工智能&#xff09;智能大数据中心和云平台&#xff0c;围绕建筑工程项目全生命周期&#xff0c;集成安…