Vue之element table 后端排序?qū)崿F(xiàn)

1、如果需要后端排序，需將sortable設(shè)置為custom，同時在 Table 上監(jiān)聽sort-change事件，在事件回調(diào)中可以獲取當(dāng)前排序的字段名和排序順序，從而向接口請求排序后的表格數(shù)據(jù)。

<el-table @sort-change='tableSortChange'><el-table-column sortable='custom' prop="createTime" label="創(chuàng)建時間"> </el-table-column> </el-table>

2、定義methods監(jiān)聽sort-change事件

tableSortChange(column) {this.listQuery.pageNo = 1if (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提交請求數(shù)據(jù)到后端

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/volodya/p/11377284.html

總結(jié)

以上是生活随笔為你收集整理的Vue之element table 后端排序实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。