Vue之element table 后端排序实现

Vue之element table 后端排序实现

1、如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。

<el-table @sort-change='tableSortChange'>
       <el-table-column sortable='custom' prop="createTime" label="创建时间"> </el-table-column> </el-table> 

2、定义methods监听sort-change事件

tableSortChange(column) {
      this.listQuery.pageNo = 1
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop this.listQuery.order = 'desc' } else { this.listQuery.sortby = column.prop this.listQuery.order = 'asc' } this.getList() } 

3、通过axios提交请求数据到后端

getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => { this.list = response.data.items this.total = response.data.total this.listLoading = false }) } 

 

来源：oschina

链接：https://my.oschina.net/u/4270180/blog/3425729