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}"
  >
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容