首页 > 其他分享 >el-table 字段自定义排序

el-table 字段自定义排序

时间:2023-11-24 21:22:05浏览次数:23  
标签:el 自定义 let result table 排序

我在element-ui中使用el-table排序,默认开启就是el-table-column上加个sortable即可,但是后端返回的数据中含有中文

列如tableData中有个字段count 对应值是 类似  13,6,2,3,4,5,10以上,7,含有中文‘以上’两个字,这个时候自带的排序已经无法满足我的要求,

所以需要增加该列的自定义排序

......
<el-table-column prop="count" label="数量" sortable
:sort-method="customSort"> </el-table-column>
.....
methods: {
  customSort(a, b) {
    let valueA = this.parseValue(a['count']);
    let valueB = this.parseValue(b['count']);

    return valueA - valueB;  // 根据解析后的数值进行排序
  },
  parseValue(value) {
    let result = value.match(/(\d+)/);  // 正则表达式提取数字

    if (result) {
      let number = parseInt(result[0], 10);
      return value.includes("以上") ? number + 0.1 : number;  // "以上" 的情况稍微增加数值
    }

    return Number.MAX_VALUE;  // 非数字字符串赋予一个大数值以便于排序
  }
}

 

标签:el,自定义,let,result,table,排序
From: https://www.cnblogs.com/yangxuming/p/17854796.html

相关文章

  • celery
    05-01celery一.官方Celery官网:http://www.celeryproject.org/Celery官方文档英文版:http://docs.celeryproject.org/en/latest/index.htmlCelery官方文档中文版:http://docs.jinkan.org/docs/celery/Celery是一个简单、灵活且可靠的,处理大量消息的分布式系统专注于实时处......
  • 爱芯元智AX650N部署yolov8s 自定义模型
    爱芯元智AX650N部署yolov8s自定义模型本博客将向你展示零基础一步步的部署好自己的yolov8s模型(博主展示的是自己训练的手写数字识别模型),本博客教你从训练模型到转化成利于Pulsar2工具量化部署到开发板上训练自己的YOLOv8s模型准备自定义数据集数据集结构可以不像下面一样,......
  • C语言【自定义数据类型、typedef、动态内存分配】
    C语言【自定义数据类型、typedef、动态内存分配】一、自定义数据类型。​ 关于下面讲到的所有自定义数据类型(enum、struct、union),有一点要说的是:定义类型不是声明变量,做这步操作时不分配内存,也不能在定义类型时赋值(枚举那个不是赋值,是做一个限定,赋值时赋限定之外的值也不报错。)......
  • [ABC329D] Election Quick Report 题解
    题目翻译有一场选举,要从\(N\)名候选人中选出一名获胜者,候选人编号为\(1,2,\ldots,N\),共有\(M\)张选票。每张选票正好投给一位候选人,其中\(i\)票投给了候选人\(A_i\)。选票将按照从第一张到最后一张的顺序进行统计,每张选票统计完毕后,将更新并显示当前的获胜者。得票......
  • 好用的IDEA插件——Apipost-Helper-2.0
    今天给大家推荐IDEA插件:ApipostHelper,比市面上很多产品好用并且完全免费!先说一下ApipostHelper的安装和使用安装在IDEA编辑器插件中心输入Apipost搜索安装:Apipost-Helper-2.0配置方法:使用ApipostIDEA插件前需要在IDEA设置中进行配置:云端域名默认为:https://sync-project-ide.a......
  • Windows-Xshell对多个终端同时执行命令(发送命令到多个会话)
    方法1:使用查看中的撰(zhuàn)写栏(1)、查看→撰写→撰写栏。 (2)、底部可以看到“撰写栏”,选择全部会话。 (3)、在撰写栏输入命令,回车后就会发送到所有会话窗口。方法2:使用工具中的发送键输入到所有会话(1)、工具→发送键输入到(K)→所有会话(A)。(2)、当窗口上面出现黄色栏时,......
  • [ABC321G] Electric Circuit 状压DP
    用到了好多技巧的状压DP我们先统计总数然后除以m的阶乘就可以了设f[i]表示状态为i的集合造成的贡献数(也就是状态为i的集合不与集合外的点联通且这个集合联通块数是1的情况数)不与集合外的点联通的话只用考虑结合i之间连边,集合外那些点之间两边就可以啦这个集合联通块数是1......
  • CF685E Travelling Through the Snow Queen's Kingdom
    题意给定一张图,走出当前边的时间为\(i\)。\(q\)次询问,问\(s\)是否能在\(l\tor\)中走到\(t\)。Sol考虑将边从大到小插入图中。注意到当前边只能对起点造成贡献。复杂度\(O(n\times\max\{n,m\})\)Code#include<iostream>#include<algorithm>#include<cstd......
  • error:0308010C:digital envelope routines::unsupported
    执行:npmrunserve 出现:error:0308010C:digitalenveloperoutines::unsupported原因:npm版本升级解决:package.json增加配置"scripts":{"serve":"setNODE_OPTIONS=--openssl-legacy-provider&&vue-cli-serviceserve","b......
  • 这篇保证你彻底搞懂Java NIO的Selector事件选择器
     Selector提供选择执行已经就绪的任务的能力,使得多元I/O成为可能,就绪选择和多元执行使得单线程能够有效率地同时管理多个I/Ochannel。C/C++许多年前就已经有select()和poll()这两个POSIX(可移植性操作系统接口)系统调用可供使用。许多os也提供相似的功能,但对Java程序......