2021-08-25 el-table 汉字排序（数字大小排序）

<el-table v-loading="loading" 
    v-if="id=='Z_C'" 
    :data="userList"
     @sort-change='sort_change'>
      <el-table-column label="BG"
                       sortable='custom'
                        align="center" key="BG" prop="BG"/>
      <el-table-column label="BU" align="center" key="BU" prop="BU"/>
      
    </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。

<el-table-column
       sortable
       :sort-method="(a,b)=>{return a.num-b.num}"
  >