vue.js 中根据字母或者中文进行排序问题

vue.js 中根据字母或者中文进行排序问题_第1张图片vue.js 中根据字母或者中文进行排序问题_第2张图片
会出现排序错误问题。

首先要安装一个插件js-pinyin
npm install js-pinyin --save
import pinyin from 'js-pinyin'   引入插件
console.log(pinyin.getFullChars('管理员'))       guanliyuan
console.log(pinyin.getCamelChars('管理员'))    GLY
网上差了很久,搜狗浏览器就是兼容不了 ,一直出现如下现象,查了很久都没有找到解决的方法。现在列用这个插件轻松接解决。
言归正传,下面上代码。
/**
 * 判断是否为中文汉字
 * @param {String} temp 需要判断字符
 */
export function isChinese (temp) {
  let re = /[^\u4E00-\u9FA5$]/
  if (re.test(temp)) { return false }
  return true
}
/**
 * 判断是否为字母
 * @param {String} char 需要判断字符
 */
export function isChar (char) {
  let reg = /[A-Za-z]/
  if (!reg.test(char)) { return false }
  return true
}
/**
 * 按字母排序
 * @param {Array} arr 排序数组
 * @param {String} attrName 排序的属性
 * @param {Boolean} empty 是否显示空的字母排序
 */
export function pySort (arr, attrName, empty) {
   if (!attrName) {
     console.error('请传入排序属性')
    return null
  }
  if (!String.prototype.localeCompare) { return null }
  let letters = 'ABCDEFGHJKLMNOPQRSTWXYZ#'.split('')
  let zh = '阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀'.split('')
  let arrList = []
  for (let m = 0; m < arr.length; m++) {
    arrList.push(arr[m])
  }
  let result = []
  let curr = {}
  for (let i = 0; i < letters.length; i++) {
    curr = {letter: letters[i], data: []}
    if (i !== 23) {
      for (let j = 0; j < arrList.length; j++) {
        let initial = arrList[j][attrName].charAt(0)// 截取第一个字符
        if (arrList[j][attrName].charAt(0) === letters[i] || arrList[j][attrName].charAt(0) === letters[i].toLowerCase()) { // 首字符是英文的
          curr.data.push(arrList[j]) // 英文字母的
        } else if (zh[i] !== '*' && isChinese(initial)) { // 判断是否是无汉字,是否是中文
          if (pinyin.getCamelChars(initial).charAt(0) === letters[i]) {
            curr.data.push(arrList[j])
          }
        }
      }
    } else {
      for (let k = 0; k < arrList.length; k++) {
        let ini = arrList[k][attrName].charAt(0) // 截取第一个字符
        if (!isChar(ini) && !isChinese(ini)) { // 首字符是不是字母汉字(如数字,特殊字符等)
          curr.data.push(arrList[k])
        }
      }
    }
    if (empty || curr.data.length) {
      result.push(curr)
    }
  }
  return result
}


然后在你需要调用这个方法的地方去调用。
比如你要传入的是arr = ['1','che','安','吧']
let newArr = pySort(arr, 'name')
这个newArr 就是你要拿来遍历的数组 效果如下
[在这里插入图片描述](https://img-blog.csdnimg.cn/20190418222041616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM3NzEyNA==,size_16,color_FFFFFF,t_70)


希望能帮到大家。

你可能感兴趣的:(vue)