当前位置: 首页 > news >正文

【项目经验】:elementui表格中数字汉字排序问题及字符串方法localeCompare()

一.需求

表格中数字汉字排序,数字按大小排列,汉字按拼音首字母(A-Z)排序。

二.用到的方法

  • 第一步:把el-table-column上加上sortable="custom"

<el-table-column prop="date" label="序号" sortable="custom" width="180">
</el-table-column>

方法详细介绍:

sortable对应列是否可以排序,如果设置为 'custom',则代表用户希望远程排序,需要监听 Table 的 sort-change 事件boolean, stringtrue, false, 'custom'false
  • 第二步:在el-table绑定事件sort-change

<el-table :data="tableData" style="width: 100%" @sort-change="sort_change">

方法详细介绍:

sort-change当表格的排序条件发生变化的时候会触发该事件{ column, prop, order }
  • 第三步:实现功能(代码)

sort_change ({ column, prop, order }) {let fieldname = prop;let sortType = order;if (fieldname == 'date') {// 数字排序this.getNums(fieldname, sortType)}if (fieldname == 'name') {// 汉字首字母排序this.tableData.sort(this.compare(fieldname, sortType));}},// 数字排序getNums (fieldname, sortType) {if (sortType === "ascending") {this.tableData = this.tableData.sort((a, b) => b[fieldname] - a[fieldname]);// console.log(this.tableData);} else if (sortType === "descending") {this.tableData = this.tableData.sort((a, b) => a[fieldname] - b[fieldname]);}},// 汉字首字母排序compare (propertyName, sort) {return function (obj1, obj2) {var value1 = obj1[propertyName];var value2 = obj2[propertyName];if (typeof value1 === "string" && typeof value2 === "string") {const res = value1.localeCompare(value2, 'zh');return sort === "ascending" ? res : -res;} else {if (value1 <= value2) {return sort === "ascending" ? -1 : 1;} else if (value1 > value2) {return sort === "ascending" ? 1 : -1;}}}}

三.字符串方法localeCompare()

概念:localeCompare() 方法用于比较两个字符串,并根据本地排序规则确定这两个字符串的顺序。这可以用于排序,例如在表格中按字母顺序排列行。

语法:string.localeCompare(compareString[, locales[, options]])

参数说明:

compareString:必需。要与调用字符串进行比较的字符串。

locales:可选。一个字符串数组,用于指定一种或多种区域设置代码。

options:可选。一个包含属性的对象,用于控制比较的各方面。

注意事项:

1、localeCompare() 方法是大小写敏感的。例如,"a" 和 "A" 是不同的字符。

2、localeCompare() 方法也是重音符号敏感的。例如,"é" 和 "è" 是不同的字符。

3、localeCompare() 方法的默认区域设置是当前系统的区域设置。

4、localeCompare() 方法返回的数字取决于本地排序规则。不同的语言和不同的区域设置可能会有不同的排序规则。

5、localeCompare() 方法不会更改原始字符串。它只是返回一个数字。

常用场景:汉字排序

四.总结

  1. 这里面相当于用了一个表格自定义排序方法,这个点是我们该考虑的,这里还可以用sort-method。这个方法是需要在每列都加的,我当时做的是动态添加表头的需求,sort-method就不好实现。
  2. 想用sort-change方法来自定义排序方法一定要sortable="custom";如果sortable="true",就代表你使用的默认排序。只有order=null时才会触发你自定义的方法。

相关文章:

【项目经验】:elementui表格中数字汉字排序问题及字符串方法localeCompare()

一.需求 表格中数字汉字排序&#xff0c;数字按大小排列&#xff0c;汉字按拼音首字母&#xff08;A-Z&#xff09;排序。 二.用到的方法 第一步&#xff1a;把el-table-column上加上sortable"custom" <el-table-column prop"date" label"序号…...

Spring Boot的运行原理

Spring Boot的运行原理 Spring Boot是一个用于快速构建独立、可独立运行的Spring应用程序的框架。它通过自动配置和约定优于配置的原则&#xff0c;简化了Spring应用程序的开发过程。下面将详细介绍Spring Boot的运行原理&#xff0c;并附上一些代码解释。 1. 主要组件 Sprin…...

xen-gic初始化流程

xen-gic初始化流程 调试平台使用的是gic-600&#xff0c;建议参考下面的文档来阅读代码&#xff0c;搞清楚相关寄存器的功能。 《corelink_gic600_generic_interrupt_controller_technical_reference_manual_100336_0106_00_en》 《IHI0069H_gic_architecture_specification》…...

Docker从认识到实践再到底层原理(六-1)|Docker容器基本介绍+命令详解

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…...

【Flink】FlinkCDC自定义反序列化器

在我们用FlinkCDC采集mysql数据(或其他数据源)的时候,FlinkCDC输出的格式不标准,不利于我们后续做数据处理,我们通常会使用自定义反序列化器来格式化采集数据方便后续处理 常规的反序列化器如下: public class FlinkDataStreamCDC {public static void main(String[] ar…...

linux基础(2)

目录 一.vi\vim编译器介绍1.三种模式2.vim的使用3.快捷键的使用 二.which&#xff0c;find命令三.grep命令四.wc命令五.管道符六.echo命令1.重定向符 七.tail命令 一.vi\vim编译器介绍 vim\vi是linux中最经典的文本编译器 同图形化界面中的文本编译器是一样的&#xff0c;vi是…...

docker安装zookeeper(单机版)

第一步&#xff1a;拉取镜像 docker pull zookeeper第二步&#xff1a;启动zookeeper docker run -d -e TZ"Asia/Shanghai" -p 2181:2181 -v /home/sunyuhua/docker/zookeeper:/data --name zookeeper --restart always zookeeper...

国际版阿里云/腾讯云免开户:云存储服务:云存储服务能够让你随时随地拜访和同享文件

云存储服务&#xff1a;云存储服务能够让你随时随地拜访和同享文件 云存储服务是一种基于云技术的存储渠道&#xff0c;能够让用户存储、管理和同享各种类型的数据文件&#xff0c;如文档、图片、视频、音频等。这种服务具有许多长处&#xff0c;以下是对其进行的详细分析&…...

【Java】应用层协议HTTP和HTTPS

HTTP和HTTPS协议 HTTPHTTP协议的工作过程HTTP协议格式抓包工具抓包结果 HTTP请求(Request)URL方法GET方法POST请求其他方法 报头(header)HostContent-lengthContent-TypeUser-AgentRefererCookie 正文(body) HTTP响应HTTP状态码响应报头(header)响应正文(body) 通过form表单构造…...

SpringBoot整合Flowable

1. 配置 &#xff08;1&#xff09; 引入maven依赖 <dependency><groupId>org.flowable</groupId><artifactId>flowable-spring-boot-starter</artifactId><version>6.7.2</version></dependency><!-- MySQL连接 -->&l…...

华为云香港S3云服务器性能测评_99元一年租用价格

华为云香港S3云服务器1核2G1M带宽99元一年性能测评&#xff0c;配置为S3云服务器1核2G1M带宽&#xff0c;S系列热卖机型&#xff0c;适用于个人建站、普通web应用等负载较低场景&#xff0c;系统盘为高IO40G系统盘&#xff0c;华为云百科分享华为云香港云服务器配置费用&#x…...

prompt 视频收集

1.ChatGPT Prompt提示词工程 ***** 常用技巧 &#xff08;基本原则&#xff0c;格式&#xff0c;角色扮演&#xff09;_哔哩哔哩_bilibili...

Rust :与C交互

rust调用C端的库函数&#xff0c;有很多方法。今天介绍通过cc库&#xff0c;通过build生成脚本的方式&#xff0c;实现rust调用c端库函数。 1、相关准备&#xff1a; 在ffi目录下&#xff0c;创建了c_part和rust_ffi文件夹。 c_part下放了ctools.c文件&#xff0c;里面有一些…...

模拟实现C语言--memcpy函数和memmove函数

模拟实现C语言–memcpy函数和memmove函数 文章目录 模拟实现C语言--memcpy函数和memmove函数一、memcpy函数和memmove函数1.1 memcpy函数是什么1.1 memmove函数是什么 二、使用示例2.1 从起始位置复制2.2 从任意位置复制 三、模拟实现3.1 模拟实现1--memcpy函数3.2 针对缺点改进…...

Linux目录

根目录 根目录&#xff1a;“/” 在Linux系统中&#xff0c;根目录指的是整个文件系统的最顶级目录&#xff0c;用符号"/"表示。根目录是文件系统的起点&#xff0c;所有其他目录和文件都嵌套在根目录下面。在根目录下通常会有一些常见的子目录&#xff0c;例如/bin…...

全国职业技能大赛云计算--高职组赛题卷①(私有云)

全国职业技能大赛云计算--高职组赛题卷①&#xff08;私有云&#xff09; 第一场次题目&#xff1a;OpenStack平台部署与运维任务1 基础运维任务&#xff08;5分&#xff09;任务2 OpenStack搭建任务&#xff08;15分&#xff09;任务3 OpenStack云平台运维&#xff08;15分&am…...

STM32--PWR电源控制

文章目录 PWR电源电源管理器上电复位&#xff08;POR&#xff09;和掉电复位&#xff08;PDR&#xff09; 可编程电压监测器&#xff08;PVD&#xff09;低功耗模式睡眠模式停止模式待机模式 睡眠模式工程停止模式待机模式 PWR STM32的PWR模块是其电源管理系统的核心部分&…...

vue+element-ui el-descriptions 详情渲染组件二次封装(Vue项目)

目录 1、需求 2.想要的效果就是由图一变成图二 ​编辑 3.组件集成了以下功能 4.参数配置 示例代码 参数说明 5,组件 6.页面使用 1、需求 一般后台管理系统&#xff0c;通常页面都有增删改查&#xff1b;而查不外乎就是渲染新增/修改的数据&#xff08;由输入框变成输…...

Nvme 协议第一章节学习

Nvme Express Base Specification 第一章 简介 1.1概述 NVM ExpressTM&#xff08;NVMeTM&#xff09;接口允许主机软件与非易失性存储器子系统通信。 此接口针对企业和客户端固态驱动器进行了优化&#xff0c;通常作为寄存器级接口连接到PCI Express接口。 注&#xff1a;在…...

三维模型3DTile格式轻量化压缩处理工具常用几款软件介绍

三维模型3DTile格式轻量化压缩处理工具常用几款软件介绍 三维模型3DTile格式的轻量化处理旨在减少模型的存储空间和提高渲染性能。以下是一些推荐的工具软件&#xff0c;可以用于实现这个目的&#xff1a; MeshLab&#xff1a;MeshLab是一个开源的三维模型处理软件&#xff0c…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

云安全与网络安全:核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...