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
}
},
}],