当前位置:   article > 正文

el-table 排序_el-table sort排序

el-table sort排序

使用el-table排序,需要先在el-table中添加 

@sort-change="handleSort"

然后在需要排序的字段上添加属性,为了方便使用属性名直接为后端数据库字段

 sortable="memberCount"

排序回调函数中会获取列的属性,以及排序方式,代码如下,我这里直接拼接成需要的对象格式:

{

        "排序字段1": "排序方式1",

         "排序字段2": "排序方式2"

}

这里的排序字段也可以用"表名.属性名"的格式,具体看需求

  1. handleSort({column, prop, order}) {
  2. let sortType = ""
  3. if (order === "ascending") {
  4. sortType = "asc"
  5. } else if (order == "descending") {
  6. sortType = "desc"
  7. } else {
  8. sortType = ""
  9. }
  10. this.queryParams.orderBy[column.sortable] = sortType
  11. this.getList()
  12. }

后端使用实体类接收,添加一个Map属性

  1. @ApiModelProperty("排序方式")
  2. private Map<String, String> orderBy;

然后直接在mybatis中

  1. ORDER BY
  2. <if test="orderBy != null">
  3. <foreach collection="orderBy" index="key" item="value" open="" close="" separator=",">
  4. ${key} ${value}
  5. </foreach>
  6. ,
  7. </if>
  8. # 其他排序属性

因为el-table中只支持单列排序,所以如果要求多列排序时需要自定义排序icon,方法调用没有区别

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号