element-plus, el-table 表头按照指定字段升降序的功能实现

zihan03212026-01-29 13:39

首先看效果：

点击操作时间，可以在升序和降序之间来回切换。

在线演示效果：https://www.eleadmin.cn

效果需要前端和后端配合才能实现这个功能。

演示网站前端使用 element-plus，后端使用 springboot + springDataJPA

前端：

html 复制代码

<el-table
        ref="operlogRef"
        v-loading="loading"
        :data="operlogList"
        @selection-change="handleSelectionChange"
        :default-sort="defaultSort"
        @sort-change="handleSortChange"
      >

html 复制代码

const defaultSort = ref({ prop: 'operTime', order: 'descending' })

/** 排序触发事件 */
function handleSortChange(column, prop, order) {
  queryParams.value.orderByColumn = column.prop
  queryParams.value.isAsc = column.order
  getList()
}

后端：

实体类：

java 复制代码

** 排序 */
    private String orderByColumn;

    /** 排序顺序 */
    private String isAsc;



  public String getOrderByColumn()
    {
        return orderByColumn;
    }

    public void setOrderByColumn(String orderByColumn)
    {
        this.orderByColumn = orderByColumn;
    }

    public String getIsAsc()
    {
        return isAsc;
    }

查询方法：

java 复制代码

// 构建排序规则
        org.springframework.data.domain.Sort sort;
        if (StringUtils.isNotEmpty(operLog.getOrderByColumn()) && StringUtils.isNotEmpty(operLog.getIsAsc())) {
            // 根据前端传递的排序字段和排序方向构建排序规则
            if ("descending".equalsIgnoreCase(operLog.getIsAsc())) {
                sort = org.springframework.data.domain.Sort.by(
                        org.springframework.data.domain.Sort.Direction.DESC, operLog.getOrderByColumn());
            } else {
                sort = org.springframework.data.domain.Sort.by(
                        org.springframework.data.domain.Sort.Direction.ASC, operLog.getOrderByColumn());
            }
        } else {
            // 默认按操作时间降序排序
            sort = org.springframework.data.domain.Sort.by(
                    org.springframework.data.domain.Sort.Direction.DESC, "operTime");
        }

java 复制代码

Pageable pageable = PageRequest.of(pageNum, pageSize, sort);
            Page<SysOperLog> page = operLogRepository.findAll(spec, pageable);

如果看不懂，请先看演示：

在线演示效果：https://www.eleadmin.cn

也可以私信