VUE element-ui之table表格全局排序、调用后端接口排序功能

最新推荐文章于 2024-07-12 11:35:01 发布

赫兹/Herzz

最新推荐文章于 2024-07-12 11:35:01 发布

阅读量3.2k

点赞数 3

分类专栏： web前端 vue elementui 文章标签：快速排序 vue.js elementui

本文链接：https://blog.csdn.net/HanXiaoXi_yeal/article/details/118719908

版权

web前端同时被 3 个专栏收录

73 篇文章 12 订阅

订阅专栏

vue

61 篇文章 2 订阅

订阅专栏

elementui

49 篇文章 9 订阅

订阅专栏

步骤：

标签中定义排序方法：

<el-table
        ref="reset"
        v-loading="loading"
        :data="tableData"
        height="520"
        border
        @sort-change="sortChange"
      >

要排序的字段定义排序关键字sortable ：

        <el-table-column prop="sumNum" label="交易次数" align="left" sortable="true" />
        //注意：调用接口排序时必须sortable="true"，表格自带排序则只需sortable

methods中实现全局排序方法：

sortChange(column) {
      this.tableData = []
      if (column) {
        if (column.prop === 'sumNum' && column.order === 'ascending') {//这里双重判断：该字段为升序时向后端传递升序参数，反之降序
          this.params.sort = 'sumNum,asc'
        } else if (column.prop === 'sumNum' && column.order === 'descending') {
          this.params.sort = 'sumNum,desc'
        }
        frequencyTen({ ...this.params }).then(res => {//注意排序后需再次调用表格数据接口更新表格
          this.tableData = res.frequency.content
        })
      }
    }