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();
      },
相关推荐
SleepyZone几秒前
Cline 源码浅析 - 从输入到输出
前端·ai编程·cline
Struggler2814 分钟前
pinia-基于monorepo的项目结构管理
前端
Struggler2818 分钟前
SSE的使用
前端
用户58061393930015 分钟前
前端文件下载实现深度解析:Blob与ObjectURL的完美协作
前端
Lin866618 分钟前
Vue 3 + TypeScript 组件类型推断失败问题完整解决方案
前端
coding随想18 分钟前
从零开始:前端开发者的SEO优化入门与实战
前端
前端工作日常21 分钟前
我理解的JSBridge
前端
Au_ust21 分钟前
前端模块化
前端
顺丰同城前端技术团队21 分钟前
还不会用 Charles?最后一遍了啊!
前端
BUG收容所所长22 分钟前
二分查找的「左右为难」:如何优雅地找到数组中元素的首尾位置
前端·javascript·算法