Vue 与 element table 结合后端请求实现排序

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

<el-table @sort-change='sortTableFun'>
       <el-table-column type="index" label="序号" width="50"></el-table-column>
       <el-table-column prop="pid" label="物料编码" min-width="80px" show-overflow-tooltip sortable></el-table-column>
</el-table>

2、在methods监听sort-change事件

           data() {
           return {
                    column: '',
                    order: '',
                    pageSize: 10,
                    currentPage: 1,
                    total: 0,
                    loading: false, // 按钮加载 状态
 
                   }
           }
 
 
         //表格排序
            sortTableFun(column) {
                this.column = column.prop;
                if (column.prop) {
                    if (column.order == 'ascending') {
                        this..order = 'ASC';
                    } else if (column.order == 'descending') {
                        this.order = 'DESC';
                    }
                    this.productList()
                }
            },

3、发请求数据到后端 返回数据

productList() {
    this.listLoading = true
    let  params={
    order: this.order,
    column: this.column,
    curPage: this.currentPage,
    pageSize: this.pageSize,
    }
      tabelList(params).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    }

这样就可以实现element sort 向后端请求排序啦!!!

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值