1

      ant-design-vue中的table组件具有排序的属性,该排序属性有三种状态:升序、降序和不排序。在项目开发中,有时产品经理会要求排序时只能有升序或降序两种状态,而table组件中却没有相应的API配置,那么我们如何取消不排序的状态呢?
image.png


一、排序相关API
      table组件中关于排序的API有4个:sorter、sortOrder、sortDirections以及change事件。

sorter:排序函数,本地排序使用一个函数,需要服务端排序可设为 true。
sortOrder: 排序的受控属性,外界可用此控制列的排序,可设置为 'ascend'、'descend'、'false'。
sortDirectionssortDirections: ['ascend' | 'descend']改变每列可用的排序方式,切换排序时按数组内容依次切换,设置在table props上时对所有列生效。使用defaultSortOrder属性,设置列的默认排序顺序。
change:分页、排序、筛选变化时触发。

      这三个API都需要设置在Column中,Column是列描述数据对象,是 columns 中的一项,Column 使用相同的 API。例如:

columns: Array<any> = [
    {
      title: '平均处理时间/ms',
      dataIndex: 'avgRt',
      width: '10%',
      sorter: true,
      sortOrder: false,
      sortDirections: ['descend', 'ascend'],
      scopedSlots: { customRender: 'avgRt' }
    }, {
      title: '最大处理时间/ms',
      dataIndex: 'maxRt',
      width: '10%',
      sorter: true,
      sortOrder: false,
      sortDirections: ['descend', 'ascend'],
      scopedSlots: { customRender: 'maxRt' }
    }
]

      上面的代码说明在table中有两列数据具有排序功能,排序功能由服务端提供,排序方式按照降序、升序的顺序依次切换。
      除了上述3个属性之外,我们还需要在排序时触发chang事件。

<a-table  
    :columns="columns"  
    :rowKey="record => record.id"  
    :dataSource="dataList"  
    @change="sorterChange"
></a-table>

      sorterChange(pagination, filters, sorter)有3个回调参数,其中跟排序相关的是sorter参数,它是一个对象,包含field、order属性,field描述当前排序的列,order描述当前排序的顺序。当处于不排序状态时,sorter对象为空。
image.png
      因此,我们可以通过判断当前sorter对象是否为空来判断当前的状态是否为不排序状态,并重新对其赋值并渲染,从而达到“消除”该状态的目的。

二、具体实现
      根据上述的设置,目前的排序状态切换为:降序->升序->空->降序->升序->空...,为了将该顺序调整为:降序->升序->降序->升序...,首先,我们需要定义一个对象sortObj对象用于存储sorter对象的值。当sorter.order === 'descend'时,将此时的sorter赋值给sortObj,当判断出当前sorter.order为空时,即状态为不排序,将上一步存储降序状态的sortObj赋值给sorter,并重新渲染该列的排序样式,那么就能将不排序状态修改为降序状态。

sorterChange (pagination, filters, sorter) {
    let sortObj = {};
    if (sorter.order === 'descend') {
      sortObj = sorter;
    }
    if (!sorter.order) {
      sorter = sortObj;
    }
    switch (sorter.field) {
      case 'avgRt':
        this.sortTrans(sorter, 0);
        break;
      case 'maxRt':
        this.sortTrans(sorter, 1);
        break;
    }
}

      渲染函数为sortTrans,它接收两个参数:sorter和index,index为当前列数据在columns数组中的位置。通过重新渲染当前列,并将其它排序列的sortOrder置为false,从而使每次切换排序时,都只有当前列处于排序状态。

sortTrans (sorter, index) {
    for (let i = 0; i < 2; i++) {
      this.columns[i].sortOrder = false;
    }
    this.columns[index].sortOrder = sorter.order;
}

三、总结

      以上的思路可以总结为两步:
      1、将值为空对象的sorter重新赋值为目标排序状态的sorter,该目标状态的sorter需要先存储下来;
      2、重新赋值后,再重新渲染目标排序列的样式。

SJJ0330
69 声望1 粉丝

Hello, my dream!