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

devtools/2024/9/19 11:12:23/ 标签: elementui, 前端, javascript, vue.js, 前端框架
  大家好,在使用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.ppmy.cn/devtools/59460.html

相关文章

ES6基本语法(二)——函数与数组

函数 函数是JavaScript中组织代码的一种方式&#xff0c;它可以提高代码的复用性&#xff0c;并使其更加模块化。 在<script>标签中定义函数 你可以在HTML文件的<script>标签内定义函数&#xff0c;或者在JavaScript文件中定义后再引入到HTML中。 <script&g…

爬虫代理访问超时怎么解决?

一、为什么会出现访问超时 爬虫使用代理可能会遇到访问超时的情况&#xff0c;主要和以下几个方面有关&#xff1a; 1.代理服务器性能&#xff1a; 代理服务器作为中间层&#xff0c;承担着转发请求和响应的任务。如果代理服务器性能不佳或超载&#xff0c;请求的响应时间可能…

LLM基础模型系列:Prompt-Tuning

------->更多内容&#xff0c;请移步“鲁班秘笈”&#xff01;&#xff01;<------ 大型预训练语言模型的规模不断扩大&#xff0c;在许多自然语言处理 &#xff08;NLP&#xff09; 基准测试中取得了最先进的结果。自GPT和BERT开发以来&#xff0c;标准做法一直是在下游…

开发指南047-前端模块版本

平台前端框架内置了一个文件version.vue <template> <div> <br> 应用名称: {{name}} <br> 当前版本&#xff1a;{{version}} <br> 服务网关: {{gateway}} </div> </template> <scrip…

RocketMQ~架构与工作流程了解

简介 RocketMQ 具有高性能、高可靠、高实时、分布式 的特点。它是一个采用 Java 语言开发的分布式的消息系统&#xff0c;由阿里巴巴团队开发&#xff0c;在 2016 年底贡献给 Apache&#xff0c;成为了 Apache 的一个顶级项目。 在阿里内部&#xff0c;RocketMQ 很好地服务了集…

移动UI:具备什么特征,可以被认定为科技风格。

移动UI设计在科技风格上通常具备以下特征&#xff1a; 1. 清晰简洁的排版&#xff1a; 科技风格的移动UI通常采用清晰简洁的排版&#xff0c;注重信息的层次感和结构化&#xff0c;以便用户能够快速、直观地获取所需信息。 2. 几何形状和线条&#xff1a; 科技风格的移动UI常…

java vue 做的一个商城发布系统

下面是一个基本的商城发布系统的关键代码和配置示例&#xff0c;使用Java和Vue实现&#xff1a; 后端代码&#xff08;Java&#xff09;&#xff1a; 创建商品实体类&#xff08;Product.java&#xff09;&#xff1a; public class Product {private String id;private Str…

《征服数据结构》二叉树

摘要&#xff1a; 1&#xff0c;二叉树的介绍 2&#xff0c;树的常见术语 3&#xff0c;二叉树的特性 1&#xff0c;二叉树的介绍 二叉树(Binary tree)是每个节点最多只有两个分支(即不存在分支度大于 2 的节点)的树结构&#xff0c;两个分支分别是左子树和右子树。除了根节点以…

本人学习保存-macOS打开Navicat提示「“Navicat Premium”已损坏,无法打开。 你应该将它移到废纸篓。」的解决方法

新安装了macOS Ventura&#xff0c;打开Navicat Premium&#xff0c;发现会提示&#xff1a; “Navicat Premium”已损坏&#xff0c;无法打开。 你应该将它移到废纸篓。 遇到这种情况&#xff0c;千万别直接移到废纸篓&#xff0c;是有办法解决的。在这里记录一下解决方案。 …

Linux C++ 052-设计模式之享元模式

Linux C 052-设计模式之享元模式 本节关键字&#xff1a;Linux、C、设计模式、享元模式 相关库函数&#xff1a; 概念 享元模式&#xff08;FlyWeight&#xff09;&#xff0c;运用共享技术有效的支持大量细粒度的对象。 典型的享元模式的例子为文书处理器中以图形结构来表…

视频播放器的问题

<template><div class"app-container"><el-form :model"queryParam" ref"queryForm" :inline"true"><el-form-item label"题目ID&#xff1a;"><el-input v-model"queryParam.id" cle…

安全面试经验分享 | 某安全厂商北京安服工程师实习岗

所面试的公司&#xff1a;某安全厂商 所在城市&#xff1a;北京 面试职位&#xff1a;安服工程师实习岗 面试过程&#xff1a; 腾讯会议&#xff08;视频&#xff09; 面试过程&#xff1a;整体流程就是自我介绍加上一些问题问题balabalabala。。。由于面的岗位是安服工程师…

UNiapp微信小程序Ucharts

效果图如下 以上为加载接口所得数据的玫瑰图与折线图 具体步骤如下 1&#xff0c;将插件导入Hbuiler 所需要的项目中&#xff08;插件地址&#xff1a;秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场&#xff09; 2&#xff0c;导入成功是这样的 3&#xff0c…

Dataset for Stable Diffusion

1.Dataset for Stable Diffusion 笔记来源&#xff1a; 1.Flickr8k数据集处理 2.处理Flickr8k数据集 3.Github&#xff1a;pytorch-stable-diffusion 4.Flickr 8k Dataset 5.dataset_flickr8k.json 6.About Train, Validation and Test Sets in Machine Learning Tarang Shah …

简谈设计模式之桥接模式

桥接模式是一种结构型设计模式, 它将抽象部分和它的实现部分分离, 使它们可以独立变化. 这意味着可以改变它的抽象和它的实现, 而不会相互影响 桥接模式结构 抽象 (Abstraction): 定义抽象类, 并包含一个对实现类对象的引用拓展抽象 (Refined Abstraction): 拓展抽象类, 通过…

堆、栈和队列(数据结构)

堆、栈和队列&#xff08;数据结构&#xff09; 这里写目录标题 堆、栈和队列&#xff08;数据结构&#xff09;**栈****队列**堆&#xff08;Heap&#xff09;&#xff08;&#xff09;队列&#xff08;Queue&#xff09;&#xff08;FIFO&#xff09;栈&#xff08;Stack&…

搜维尔科技:通过 Xsens MVN Link 套装测试动作捕捉动画,由虚幻引擎5渲染

通过Xsens MVN Link套装测试动作捕捉动画&#xff0c;由虚幻引擎5渲染 搜维尔科技&#xff1a;通过 Xsens MVN Link 套装测试动作捕捉动画&#xff0c;由虚幻引擎5渲染

FPGA实训报告DAY 1(Verilog HDL)

实习日志与总结 日期&#xff1a;2024 年 7 月 10 日 星期三 姓名&#xff1a;XXX 一、实习日志 上午 9:00 - 9:30 按时到达工位&#xff0c;参加部门早会&#xff0c;了解了今天的实习任务和目标&#xff0c;即初步学习 FPGA 简介和 Verilog 基础语法知识。 9:30 - 10:30…

Flask 静态文件处理

1. 静态文件目录 Flask 默认会在应用的根目录下寻找一个名为 static 的文件夹&#xff0c;并将其作为静态文件的存储目录。你可以通过 static_folder 参数来指定不同的静态文件目录路径。 from flask import Flask app Flask(__name__, static_foldermy_static) 2. 静态文件 …

图扑低代码数字孪生 Web SCADA 智慧钢厂

2024 年 4 月&#xff0c;中国钢铁工业协会发布了《钢铁行业数字化转型评估报告&#xff08;2023年&#xff09;》&#xff08;以下简称《报告》&#xff09;。《报告》指出&#xff0c;绝大部分钢铁企业建立了数字化转型相关管理组织和团队&#xff0c;并加强其规划落实&#…