当前位置: 首页 > 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…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

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

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

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...