antd-vue中的表格排序

antd-vue中的表格排序

在使用antd-vue的表格想实现排序，但是不知道怎么弄的可以看这里，此处讲解了一个是数字类的排序（例如成绩），一个是字符串类的排序(例如姓名)。
那么，我们开始吧。

字符串类型的排序

如图，我们要实现对字符串的排序，按照设备类型进行排序。

首先，antd的官方说了，在定义列columns时，里面有一个sorter排序，antd表格,下面是定义列的数据格式。

//注意，此处我只摘取了定义设备类型这一列的字段。
//我们重点看sorter
 const deviceColumns= [
 {
    title: '设备类型',
    dataIndex: 'type',
    key: 'type',
    sorter: {
      compare: (a, b) => {
        let a1 = a.type.slice(0, 1).charCodeAt();
        let b1 = b.type.slice(0, 1).charCodeAt();
        if (a1 < b1) {
          return -1;
        }
        if (a1 > b1) {
          return 1;
        }
        if (a1 == b1) {
          return 0;
        }
      },
    },
  }
  ],
  //解释:
  //列里面的sorter是可以进行排序的，里面的compare()函数就是我们的排序函数的逻辑。
  //思路:根据charCodeAt()获取到字符串的unicode编码，根据unicode编码去进行排序。
  //重点讲解:
        compare: (a, b) => {
        //a.type就是字符串"基站" "引擎",这边我是需要截取到基/引，然后再获取到unicode编码。
        //charCodeAt()如果里面不传参数，默认找0的unicode编码
        let a1 = a.type.slice(0, 1).charCodeAt();
        let b1 = b.type.slice(0, 1).charCodeAt();
        //此处，如果a1<b1,返回-1代表a1排前面
        if (a1 < b1) {
          return -1;
        }
        //此处，如果a1>b1,返回1代表a1排后面
        if (a1 > b1) {
          return 1;
        }
        //此处返回0就是不动
        if (a1 == b1) {
          return 0;
        }
      },

好了,理解玩代码之后那你就已经实现了功能啦，如图：

数字类型的排序

对于数字类型的排序更简单了，我们只需要直接return出a-b即可,此处以上图卡号为例.

 const deviceColumns= [{
    title: '设备类型',
    dataIndex: 'type',
    key: 'type',
    sorter: {
    //数字的直接return a-b;即可(负数为升序)
      compare: (a, b) => {
     	return a.card- b.card
      }
    },
  }],