elementui el-table实现后端排序

前端 潘老师 1个月前 (01-09) 46 ℃ (0) 扫码查看

elementui框架中的el-table表格,想要根据某一列实现后端排序,其实并不难,只需要如下几步:

1.设置sortable=”custom”

对与需要排序的column列,加上sortable=”custom”的属性,类似如下:

<el-table-column
     sortable="custom"
     prop="shiftFront"
     label="偏前">
 </el-table-column>

2. 设置sort-change事件

接下来我们需要在el-table上新增sort-change排序监听事件,类似如下:

<el-table
     :data="trayShiftList"
     border
     v-loading="trayShiftLoading"
     @sort-change="sortChange">
//.....

3.自定义排序方法

最后我们需要自定义排序的方法,比如上面我们自定义的排序方法名为sortChange,我们定义如下:

sortChange(column) {
      // 获取字段属性
      var prop = column.prop
      //获取排序类型
      var order = column.order
      // ....
}

需要注意下排序类型的取值为:ascending(升序)和descending(降序)。

最后我们将想要的排序字段传给后端即可,以上就是elementui el-table实现后端排序的全部内容,希望对你有帮助!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12748.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】