解决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 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
vue-router路由与页面间导航实例解析
Nov 07 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
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 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
js输出列表实现代码
2010/09/12 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
医药代表个人求职信范本
2013/12/19 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
2015年底工作总结范文
2015/05/15 职场文书
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电