zoukankan      html  css  js  c++  java
  • Vue之element table 后端排序实现

    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
          })
        }
    
  • 相关阅读:
    shell eval命令
    嘟嘟嘟
    07 linkextractor的基本用法
    rabbitmq消息队列
    5. 哨兵集群
    4.主从同步
    3. redis持久化存储
    2. redis 安全
    1.redis基础
    06. scrapy的Request对象
  • 原文地址:https://www.cnblogs.com/volodya/p/11377284.html
Copyright © 2011-2022 走看看