当前位置：首页 > article >正文

antd+vue——table组件字段排序——对象数组排序中文排序——基础积累

article 2025/2/27 19:05:03

最近在用vue+antd做后台管理系统时，遇到一个需求就是要实现table表格某个字段的排序

效果图如下：
在这里插入图片描述
在antd官网上，有关于排序的示例：

示例中给出的两个字段的排序

在这里插入图片描述

监听change事件，可以获取到当前排序的字段名

由于我这边的需求是按照文字排序，也就是中文文字排序，因此上面的代码不太适合

下面介绍我的写法：

1.给想要排序的字段添加`sorter`属性，这样才能在表格中有上下箭头的效果

...
{
    title: '订单包',
    dataIndex: 'groupNo',
    sorter: (a, b) => a.groupNo - b.groupNo,
    width: 100,
  },
  {
    title: '订单号',
    dataIndex: 'orderNo',
    sorter: (a, b) => a.orderNo - b.orderNo,
    width: 110,
  },
...

在这里插入图片描述

2.给table组件绑定change事件

 <a-table
        :rowKey="(r, i) => r.Id"
        :columns="columns"
        :data-source="tableList"
        :pagination="pagination"
        bordered
        :scroll="{ x: 1000, y: 460 }"
        @change="changeTable"
      >
 ...
</a-table>

3.监听`change`事件

changeTable(pagination, filters, sorter) {
  console.log(sorter);
  if (sorter && sorter.columnKey) {
    let list = this.tableList.sort(
      this.sortBy(
        sorter.columnKey,
        sorter && sorter.order == 'ascend' ? true : false
      )
    ); //sortBy是根据value字段对对象数组进行排序
    console.log(this.tableList);
    this.tableList = list;
  } else {
    const pager = { ...this.pagination };
    pager.current = pagination.current;
    this.pagination = pager;
    this.getList();
  }
},

先判断是否有sorter，如果有这个属性，则表示可以进行字段的排序，如果没有，则表示是切换了页码或者其他操作，是需要调接口的。
因为我这边的需求是：仅针对当前页面的数据进行排序，不需要调用接口排序。

此时需要用到汉字的排序：

sortBy(field, flag) {
  return function(a, b) {
    if (flag) {
      return b[field].localeCompare(a[field]);
    } else {
      return a[field].localeCompare(b[field]);
    }
  };
},