解决vue elementUI中table里数字、字母、中文混合排序问题

 更新时间:2020-01-07 22:11:20   作者:佚名   我要评论(0)

1.使用场景
使用elementUI中的table时,给包含数字字母中文的名称等字段排序
例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)->中文拼音(a->z)
2.代码解

1.使用场景

果博东方使用elementUI中的table时,给包含数字字母中文的名称等字段排序

例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)->中文拼音(a->z)

2.代码解析

<el-table   ref="multipleTable"   border   tooltip-effect="dark"   class="xg-table"   style="width: 100%"   max-height="600">   <el-table-column    type="selection"    width="60" />   <el-table-column    :default-sort = "{prop: 'DevName'}"    :sort-method="sortDevName"    prop="DevName"    label="名称"    sortable    show-overflow-tooltip /></el-table>

果博东方设置属性sortable,会按照自带的机制排序,不符合我们的预期;

果博东方所以增加属性 sort-method,在方法中自定义排序方式

<script>  export default {    methods: {      sortDevName(str1, str2) {       let res = 0       for (let i = 0; ;i++) {  if (!str1[i] || !str2[i]) {   res = str1.length - str2.length   break  }  const char1 = str1[i]  const char1Type = this.getChartType(char1)  const char2 = str2[i]  const char2Type = this.getChartType(char2)  // 类型相同的逐个比较字符  if (char1Type[0] === char2Type[0]) {   if (char1 === char2) {   continue   } else {   if (char1Type[0] === 'zh') {    res = char1.localeCompare(char2)   } else if (char1Type[0] === 'en') {    res = char1.charCodeAt(0) - char2.charCodeAt(0)   } else {    res = char1 - char2   }   break   }  } else {  // 类型不同的,直接用返回的数字相减   res = char1Type[1] - char2Type[1]   break  }   }   return res  },  getChartType(char) {  // 数字可按照排序的要求进行自定义,我这边产品的要求是  // 数字(0->9)->大写字母(A->Z)->小写字母(a->z)->中文拼音(a->z)   if (/^[\u4e00-\u9fa5]$/.test(char)) {  return ['zh', 300]   }   if (/^[a-zA-Z]$/.test(char)) {  return ['en', 200]   }   if (/^[0-9]$/.test(char)) {  return ['number', 100]   }   return ['others', 999]  }    }  }</script>

3.页面效果

 原列表                   ==》》            正序                 ==》》         倒序

总结

以上所述是小编给大家介绍的解决vue elementUI中table里数字、字母、中文混合排序问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
果博东方如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

您可能感兴趣的文章:

  • vue elementUI使用tabs与导航栏联动
  • vue elementui el-form rules动态验证的实例代码详解
  • vue elementUI table 自定义表头和行合并的实例代码
  • vue+elementUI实现表单和图片上传及验证功能示例
  • 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
  • vue elementUI table表格数据 滚动懒加载的实现方法

果博东方相关的文章

  • 解决vue elementUI中table里数字、字母、中文混合排序问题

    解决vue elementUI中table里数字、字母、中文混合排序问题

    1.使用场景使用elementUI中的table时,给包含数字字母中文的名称等字段排序例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)->中文拼音(a->z)2.代码解
    2020-01-07
  • 安装win10+黑苹果双系统零基础教程(图文)

    安装win10+黑苹果双系统零基础教程(图文)

    一、准备工作准备8g以上的U盘安装TransMac 下载地址:http://www.jb51.net/softs/596307.html安装Hasleo EasyUEFI 下载地址:http://www.jb51.net/softs/52710
    2020-01-07
  • Pytorch 神经网络—自定义数据集上实现教程

    Pytorch 神经网络—自定义数据集上实现教程

    第一步、导入需要的包import osimport scipy.io as sioimport numpy as npimport torchimport torch.nn as nnimport torch.backends.cudnn as cudnnimport
    2020-01-07
  • Matplotlib绘制雷达图和三维图的示例代码

    Matplotlib绘制雷达图和三维图的示例代码

    1.雷达图程序示例'''1.空白极坐标图'''import matplotlib.pyplot as plt plt.polar()plt.show() '''2.绘制一个极坐标点'''import numpy as npim
    2020-01-07
  • Mysql8.0使用窗口函数解决排序问题

    Mysql8.0使用窗口函数解决排序问题

    MySQL窗口函数简介MySQL从8.0开始支持窗口函数,这个功能在大多商业数据库和部分开源数据库中早已支持,有的也叫分析函数。什么叫窗口&#63;窗口的概念非常重要,
    2020-01-07
  • 浅谈Python访问MySQL的正确姿势

    浅谈Python访问MySQL的正确姿势

    Py2 时代,访问 MySQL 数据库的模块除了 PyMySQL 和 MySQL-python 之外,还有以速度见长的 Umysql,以及非常小众的 Oursql 模块。进入了 Py3 时代之后,PyMySQL 与时
    2020-01-07
  • Java实现按比抽奖功能

    Java实现按比抽奖功能

    需求是要做几个小游戏的抽奖功能,需要根据不同的游戏有不同的抽奖规则,其中也有很多共性,可归纳为只按奖品占比抽取、奖品占比与奖品数量抽取、分段抽取,为方便起
    2020-01-07
  • 详解vmware14Pro中ubuntu系统界面太小的问题解决

    详解vmware14Pro中ubuntu系统界面太小的问题解决

    1.操作环境vmware14Proubuntu 16.04LTS2.问题描述在使用vmware14Pro安装ubuntu 16.04LTS系统后,屏幕始终比较小,无法根据vmware的变化而变化。3.问题原因
    2020-01-07
  • python全局变量引用与修改过程解析

    python全局变量引用与修改过程解析

    这篇文章主要介绍了python全局变量引用与修改过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下一、引
    2020-01-07
  • pytorch加载自定义网络权重的实现

    pytorch加载自定义网络权重的实现

    在将自定义的网络权重加载到网络中时,报错:AttributeError: 'dict' object has no attribute 'seek'. You can only torch.load from a file that is seekable. P
    2020-01-07

最新评论