2021-08-25 el-table 汉字排序(数字大小排序)


      
      
      
    
sort_change(column) {
      this.proptype = column.prop;
      if (column.order === "descending") {
        this.order = 1
        this.userList.sort(this.sortDevName);
      } else if (column.order === "ascending") {
        this.order = -1
        this.userList.sort(this.sortDevName);
      }else{
        this.userList = JSON.parse(JSON.stringify(this.userList))
      }
 // 解决sort排序后强制转换null为“null”字符串类型,导致页面表格展示null字符串
  for (let i = 0; i < userList.length; i++) {
    for (let key in userList[i]) {
      if(userList[i][key] === 'null'){
        userList[i][key]=null
      }
    }
  }
    },
    sortDevName(str1, str2,a) {
      let res = 0
      str1[this.proptype] = String(str1[this.proptype])
      str2[this.proptype] = String(str2[this.proptype])
      if(str1[this.proptype] !== '' && str2[this.proptype] === ''){
        return -1
      }else if(str2[this.proptype] !== '' && str1[this.proptype] === ''){
        return 1
      }else{
        for (let i = 0; ;i++) {
          if (!str1[this.proptype][i] || !str2[this.proptype][i]) {
            res = str1[this.proptype].length - str2[this.proptype].length
            break
          }
          const char1 = str1[this.proptype][i]
          const char1Type = this.getChartType(char1)
          const char2 = str2[this.proptype][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
          }
        }
      }
      res = this.order * res
      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]
    },

注意:这里数字排序 涉及到小数点。排序会出现诡异情况,需要在column列设置sort-method。


你可能感兴趣的:(2021-08-25 el-table 汉字排序(数字大小排序))