在iview中实现列表远程排序

用户3880999

发布于 2023-04-13 17:07:00

1.8K0

发布于 2023-04-13 17:07:00

文章被收录于专栏：meishadevs的前端专栏meishadevs的前端专栏

iview中可以通过给列表中每个字段设置sortable: true可以实现字段排序，但是当列表中的数据量比较多时，列表中会有分页，此时只能对当前页进行排序，针对这个问题,iview中有一个远程排序功能，可以通过远程排序实现多页数据的排序

第一步： 在Table中监听触发排序的事件

第二步：将需要排序的字段的sortable属性的值改成custom

第三步：在数据查询对象中增加用于字段排序的属性，其中filed表示要排序的字段，sortType表示排序的类型

第四步：每触发一次字段排序，都调用一次获得列表的方法，并将当前排序的字段名和排序方式通过api传递给后台

 // 对客户信息排序
sortCustomer(column, key, order) {
  // 排序的字段
  this.listQuery.filed = column.key

  // 排序的方式
  this.listQuery.sortType = column.order
  this.getCustomerList()
}

第五步：在实体类中增加filed字段何sortType字段

 /**
 * 根据filed字段排序
 */
@TableField(exist = false)
private String filed;

/**
 * 排序的类型
 */
@TableField(exist = false)
private String sortType;

第六步： 在mapper中根据传递过来的参数实现相应的排序

<if test="filed == 'fullName' and sortType != 'normal'">
    order by customer.full_name ${sortType}
</if>
<if test="filed == 'idType' and sortType !=  'normal'">
    order by customer.id_type ${sortType}
</if>
<if test="filed == 'orderPersonName' and sortType != 'normal'">
    order by contact.full_name ${sortType}
</if>
<if test="filed == 'orderDate' and sortType != 'normal'">
    order by tempOrder.orderDate ${sortType}
</if>
<if test="sortType == '' or sortType == 'normal'">
    order by tempOrder.orderDate desc
</if>