elementui el-table实现后端排序

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实现后端排序的全部内容，希望对你有帮助!

喜欢 (0)赏

【请潘老师喝杯Coffee吧！】

分享 (0)