Vue之element table 后端排序实现

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


       
       

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

你可能感兴趣的:(Vue之element table 后端排序实现)