美文网首页
ant-design-vue table前端排序,字符串排序(升

ant-design-vue table前端排序,字符串排序(升

作者: Tiny哲 | 来源:发表于2020-03-19 16:09 被阅读0次

    解决方案

    column配置时,不使用a.TERNO > b.TERNO进行比较,使用localeCompare方法,样例如下:

    // 将sorter
    sorter: (a, b) => a.TERNO > b.TERNO 
    // 替换为下列函数,当然也可以比较汉字,下面链接有详细说明
    sorter: (a, b) => a.TERNO.localeCompare(b.TERNO, 'en')
    

    关于MDN String.prototype.localeCompare()的介绍可以去
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

    发现及解决的过程

    1. 使用column的配置如下

      {
          title: '终端编号',
          width: 120,
          align: 'center',
          dataIndex: 'TERNO',
          sorter: (a, b) => a.TERNO > b.TERNO 
      }
      

      通过此配置发现,对于该列的排序升序不生效,降序可以

    降序.png 升序.png
    1. 于是很自然的考虑是不是,排序方法有问题,于是乎换了个排序方法
    {
        title: '终端编号',
        width: 120,
        align: 'center',
        dataIndex: 'TERNO',
        sorter: (a, b) => a.TERNO.localeCompare(b.TERNO, 'en')
    }
    

    经过测试,排序生效了

    1. 两个函数都可以做字符串按照ASCII码的比较,唯一的不同是返回值不同

      let a = 'a',
          b = 'b';
      console.log(a > b);                          // false
      console.log(a < b);                           // true
      console.log(a.localeCompare(b, 'en'));        // -1
      console.log(b.localeCompare(a, 'en'));        // 1
      

      众所周知

      true == 1;  //true
      false == 0; // true
      false < 0 // false
      

      以上导致了使用a > b,作为sorter的方式,会引起当a < b时,返回false,而这时antd认为false不是个小于0的值,所以a也就不小于b,导致小的数一直无法被交换到前面,排序失效。

      而当反过来时,true > 0,此时认为是生效了。也是就是说,使用a > b总有一个不行。

    相关文章

      网友评论

          本文标题:ant-design-vue table前端排序,字符串排序(升

          本文链接:https://www.haomeiwen.com/subject/rbdlyhtx.html