antd vue表格中的表头columns请求后端，结果排序有问题？

Z时代
2024-02-25
分类：IT

问题

发现antd ui一个比较纠结地方，假设表格中的表头跟数据都是要请求后端接口，当然显示起来没问题。奇怪问题就在表头json中加了排序字段，如下：

"sorter": "(a, b) => a.name.length - b.name.length"

我们后端说给的json得有引号，不然报错。这样也导致，页面中虽然能显示排序按钮，但没有任何作用。

无奈解决办法

因为我们老大坚持不要走后端请求排序，非要前端搞。结果没办法搞了一击

   let colsList = res.result.cols;
      colsList.forEach((item, index) => {
        if (item.sorter != undefined) {
          item.sorter = eval(item.sorter)
        }
      })
   this.columns = colsList

面临问题

我在想这单表头那是没问题，这要碰到复杂表头涉及到children，就over。
1、前端哪知道不同表头有多少层级的children，难道一个个forEach，不可能。
2、看了隔壁的ele UI那真叫一个友好，一个属性true完事。
3、antd ui难道没有什么办法解决这样情况？请大神指点。

回答：

前端做排序不现实
原因：大部分项目用到表格都是类似报表或信息那种，数据量一般比较大，用antd的table，向后端发数据的时候一般都带page和pageSize，都是分页查询。而排序的时候可不单单只是当前页面的排序，像你这中写法，如果是分页查询，排的顺序只是这个页面的，而不是全部数据的，所以必须要后端来做排序。
antd给列表的项定义sorter后，可以通过table的onchange来监听事件改变，再监听事件中的sorter参数里面有key（排序的列的名字）字段，和order（正序还是反序）字段，通过这个可以拼接一个字符串给后端，让后端来做排序

<ProTable
       size="middle"
       columns={tableColumns}
       dataSource={data}
       rowKey={uuid()}
       pagination={false}
       aroundBordered
       scroll={{x:true}}
       onChange={handleTableChange}
 />
const handleTableChange = (
            newPagination: any,
            filters: Record<string, any>,
            sorter: any
        ) => {
            let key = sorter.field;
            let order = sorter.order?.slice(0, -3);
            let orderSql = key && order ?`orderBy ${key} ${order}` : '';
            setSorterValue(orderSql);
            listDataContainerRef.current?.loadDataSource?.();        };