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

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

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

2、定義methods監(jiān)聽(tīng)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、通過(guò)axios提交請(qǐng)求數(shù)據(jù)到后端

getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容