Element-ui el-table 全局表格排序

实现效果如下:

一、当页数据排序

如果只想要当前页面排序,只会涉及到前端,只需在<el-table-column>标签上添加 :sortable="true"即可

二、自定义排序

如果想要全局排序,需要自定义排序函数,请求后台排序后在分页。

1、自定义排序函数,在<el-table>上添加

@sort-change="sortChange"

2、在要排序的列上加上

复制代码
sortable="custom"

3、实现排序函数sortChange

复制代码
     //自定义排序列表
      sortChange(data) {
        const { prop, order } = data
        //排序列
        this.queryParams.orderByColumn = prop;
        //排序顺序ascending或descending
        this.queryParams.isAsc = order;
        //返回第一页
        this.queryParams.pageNum = 1;
        //刷新列表
        this.getList();
      },
相关推荐
Android技术之家2 分钟前
在手机上跑大模型?Google AI Edge Gallery 开源项目深度解析
前端·人工智能·edge·开源
DEMO派3 分钟前
CSS优先级规则以及如何提升优先级方案详解
前端·javascript·css·vue.js·reactjs·html5·angular.js
hhcccchh5 分钟前
学习vue第十一天 Vue3组件化开发指南:搭积木的艺术
前端·vue.js·学习
AntoineGriezmann8 分钟前
基于 Unocss 的后台系统 SVG 图标方案实践
前端
小夏卷编程9 分钟前
ant-design-vue 2.0 a-table 中实现特殊行样式,选中样式,鼠标悬浮样式不一样
前端·javascript·vue.js
wulijuan8886669 分钟前
前端性能优化之图片webp
前端
一颗烂土豆10 分钟前
ECharts 水球图不够炫?试试 RayChart 的创意可视化玩法
前端·vue.js·数据可视化
如果你好11 分钟前
TypeScript 接口(interface)完全指南:语法、特性与实战技巧
vue.js·typescript
天才熊猫君11 分钟前
Vue 3 命令式弹窗组件
前端
NEXT0612 分钟前
CSS基础-标准盒模型与怪异盒模型
前端·css