el-table 自定义排序方法(浮点数负数增强版)

<el-table v-loading="loading" 
    v-if="id=='Z_C'" 
    :data="userList"
     @sort-change='sort_change'>
      <el-table-column label="BG"
                       sortable
                       :sort-method="sortDevName"
                        align="center" key="BG" prop="BG"/>
      <el-table-column label="BU" align="center" key="BU" 
sortable
:sort-method="sortDevName"
 prop="BU"/>
      
    </el-table>
    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]
    },
    sortDevName(str1, str2) {
      let res = 0
      this.proptype = Number(this.proptype)
      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 if (this.isNum(str1[this.proptype]) && this.isNum(str1[this.proptype])) {
        if (/^(-?\d+)(\.\d+)?$/.test(str1[this.proptype]) && /^(-?\d+)(\.\d+)?$/.test(str2[this.proptype])) {
          // 如果都为负数小数,则计算需要反过来
          if (this.order) {
            return str1[this.proptype] - str2[this.proptype]
          }
          return str2[this.proptype] - str1[this.proptype]
        } else {
          if (this.order) {
            return str2[this.proptype] - str1[this.proptype]
          }
          return str1[this.proptype] - str2[this.proptype]
        }
      } 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
    },
    isNum(val) {
      // 判断是否为数值类型
      return /^-?\d+$/.test(val) || /^(-?\d+)(\.\d+)?$/.test(val)
    },
    sort_change(column) {
      console.log(column)
      this.proptype = column.prop
      if (column.order === 'descending') {
        this.order = 1
      } else if (column.order === 'ascending') {
        this.order = -1
      }
    },

借鉴于 https://www.jianshu.com/p/a24ed309214b

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值