CatchAdmin实战教程(四)Table组件之自定义排序

前言： CatchAdmin的Table组件默认是采用的element-table的页面排序，若想使用前端的排序字段通过后端API接口进行排序就比较困难，在这里我提供了两种方式来实现自定义排序的功能：我们后端API只需要获取相应的filed_order来判断是否存在排序的字段进行数据重新排序即可。

1. 排序功能

1.1 纯页面排序

官方站点仅提供了纯页面当前页数的排序功能：sortable

1.1.1 示例

 public function table()
    {
        // TODO: Implement table() method.
       return $this->getTable('bonds')
                   ->header([
                      //  1. 开启字段排序的功能
                       HeaderItem::label('编号')->prop('id')->sortable()->width(80),
                       HeaderItem::label('更新时间')->prop('updated_at')->sortable()->width(150),
                       HeaderItem::label('操作')->actions([
                           Actions::delete()
                       ])
                   ])
                   ->withBind()
                   ->withApiRoute('cms/articles')
                   ->withActions([
                       Actions::create()->to('/cms/articles/detail/')
                   ])
                   ->render();
    }

1.2 自定义排序

自定义排序的功能： 主要是通过在API地址上添加table页面中的字段的升降值请求获取相应的响应数据

1.2.1 添加Method

catch-admin-vue项目src/components/Catch/Table/mixin/operete.js中添加orderChange方法

1.2.1.1 示例

    // 字段排序
    orderChange(column) {
      //  1. 设置搜索排序字段
      const order_filed = column.prop + '_order'
      //  2. 判断排序类型
      if (column.order === 'ascending') {
        // 3. 设置搜索排序字段值
        this.queryParams[order_filed] = 'asc'
      } else if (column.order === 'descending') {
        this.queryParams[order_filed] = 'desc'
      } else {
        this.queryParams[order_filed] = ''
      }
      //  4. 重新请求接口
      this.getList()
    }

1.2.2 添加事件

1.2.2.1 方式一

在CatchAdmin项目extend/catcher/library/table/Events.php中添加事件orderChange

    /**
     * @note: 排序
     * @return mixed
     * @time: 2022-07-25 14:57
     */
    public function orderChange()
    {
        $this->appendEvents([
            'sort-change' => 'orderChange'
        ]);

        return $this;
    }

1.2.3 使用事件

使用事件这里提供了两种方式：
第一种是采用官方的事件方法withEvents()更方便
第二种是采用自定义的事件方法orderChange()自由度比较高，可以根据自己的需求自行设置其他功能。

 public function table()
    {
        // TODO: Implement table() method.
       return $this->getTable('bonds')
                   ->header([
                      //  1. 开启字段排序的功能
                       HeaderItem::label('编号')->prop('id')->sortable()->width(80),
                       HeaderItem::label('更新时间')->prop('updated_at')->sortable()->width(150),
                       HeaderItem::label('操作')->actions([
                           Actions::delete()
                       ])
                   ])
                   ->withBind()
                   //  2. 新增排序改变的事件(自定义排序)
                   //  2.1 方式1
                   ->orderChange()
                   //  2.2 方式2
                   ->withEvents([
                       'sort-change' => 'orderChange'
                   ])
                  ->withApiRoute('cms/articles')
                   ->withActions([
                       Actions::create()->to('/cms/articles/detail/')
                   ])
                   ->render();
    }

1.2.3 示例

请求URL示例：/cms/articles?id_order=desc
这里我们后台可以通过获取请求字段值的_order后缀，判断是否存在排序的字段进行相应的排序处理。

结尾语： 相信你看到这里应该对CatchAdmin的Table组件自定义排序有个基本的掌握了，若对你有所帮助，请不要忘了用你的小手点点关注、点赞、收藏哟！