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 }) }