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


Posted in Javascript onJanuary 07, 2020

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中table里数字、字母、中文混合排序问题解决vue elementUI中table里数字、字母、中文混合排序问题

总结

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

Javascript 相关文章推荐
JavaScript脚本语言在网页中的简单应用
May 13 Javascript
javascript call和apply方法
Nov 24 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
微信小程序排坑指南详解
May 23 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 #Javascript
微信小程序服务器日期格式化问题
Jan 07 #Javascript
webpack 最佳配置指北(推荐)
Jan 07 #Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 #Javascript
vue实现数据控制视图的原理解析
Jan 07 #Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 #Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 #Javascript
You might like
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
vue表单数据交互提交演示教程
2019/11/13 Javascript
python回调函数用法实例分析
2015/05/09 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
英语师范专业毕业生自荐信
2013/09/21 职场文书
夜大毕业生自我鉴定
2013/10/31 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
战略合作意向书范本
2014/04/01 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
新员工辞职信范文
2015/05/12 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
如何理解python接口自动化之logging日志模块
2021/06/15 Python