Vue+element-ui对表格指定列进行前端排序

最新推荐文章于 2024-05-11 20:35:08 发布

前端小白学习中....

最新推荐文章于 2024-05-11 20:35:08 发布

阅读量536

点赞数

分类专栏： VUE elementUI 文章标签：前端 vue elementui

本文链接：https://blog.csdn.net/weixin_43305450/article/details/125514412

版权

VUE 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

elementUI

13 篇文章 0 订阅

订阅专栏

1.对el-table绑定sort-change事件:

<el-table ref="table" max-height="425" size="mini" v-loading="loading" :data="certificationList" @sort-change="sortChange" border stripe></el-table>

data() {
    return {
      propType:"",//存放column.prop的字符串值
    }
}

2.js

sortChange(column) {
      console.log('当前列需要排序的数据', column.prop);
      console.log('当前列的排序规则', column.order);
      this.certificationForm.pageNo = 1 //排序后返回第一页
      if (column.prop === 'riskStatus') {
        this.propType = column.prop
        if (column.order === 'descending') {
          this.certificationList.sort(this.descSort)
        } else if (column.order === 'ascending') {
          this.certificationList.sort(this.ascSort)
        }
      } else if (column.prop === 'totalCertificateQuantity') {
        this.propType = column.prop
        if (column.order === 'descending') {
          this.certificationList.sort(this.descSort)
        } else if (column.order === 'ascending') {
          this.certificationList.sort(this.ascSort)
        }
      } else {
        this.certificationForm.sortName = column.prop;
        this.certificationForm.sort = column.order === "descending" ? "DESC" : "ASC";
        this.getcertificationList();
      }
    },
    // 正序
    descSort(a, b) {
      return b[this.propType] - a[this.propType]
    },
    // 倒序
    ascSort(a, b) {
      return a[this.propType] - b[this.propType]
    },