Element Plus 表格后端排序

Hello攻城狮

已于 2022-08-12 11:23:56 修改

阅读量3.7k

点赞数 2

分类专栏：前端 vue3 文章标签：前端 javascript 开发语言

于 2022-08-12 11:19:56 首次发布

本文链接：https://blog.csdn.net/weixin_42912237/article/details/126299491

版权

前端同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

element 表格后端排序（element和element plus通用）

问题
解决方法

问题

element排序采用官方给出的方案，按部就班后的产生的问题是：给出的排序有三种状态，descending、ascending 和null但是我只需要前面两种，目前的效果如下：在这里插入图片描述

解决方法

使用两个变量分别保存上一次为null时的prop和保存之前的排序状态，实现效果：在这里插入图片描述

代码：

html：

 <el-table
          :data="dataObj.dataList"
          ref="multipleTable"
          slot="empty"
          :height="tableHeight"
          @sort-change="colChange"
          :sort-orders="['ascending', 'descending']"
          :default-sort="{prop: 'id', order: 'descending'}"
          :cell-class-name="rowClass"
      >

js（vue3的写法）

  const dataObj = reactive({
      searchObj: {
        id: '',
        planName: '',
        createUser: '',
        status: undefined,
        orderBy: 'id',
        orderType: 'desc',
      },
      dataList: [],
      searchPage: {
        pageSize: 10,
        pageNum: 1,
      },
      prevProp: 'id', // 保存上一次为null时的prop
      saveSort: 'descending',  // 保存之前的排序状态
    })

	// 排序
    const colChange = ({column, prop, order}) => {
      if (order && dataObj.prevProp !== prop) {
        dataObj.prevProp = prop
      }
      if (!order) {
        order = dataObj.saveSort === 'descending' ? 'ascending' : 'descending'
        that.$refs.multipleTable.sort(dataObj.prevProp, order)
        prop = dataObj.prevProp
      }
      dataObj.saveSort = order
      dataObj.searchObj.orderBy = prop
      dataObj.searchObj.orderType = dataObj.saveSort === 'descending' ? 'desc' : 'asc'
      if (column) getDataList() // 获取数据的方法
    }
    // 重置
    const resetData = () => {
      dataObj.searchPage.pageSize = 10
      dataObj.searchPage.pageNum = 1
      dataObj.searchObj = {}
      that.$refs.multipleTable.sort('id', 'descending')
    }