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();
      },
相关推荐
谢尔登几秒前
原来Webpack在大厂中这样进行性能优化!
前端·webpack·性能优化
g***B73814 分钟前
JavaScript在Node.js中的模块系统
开发语言·javascript·node.js
Z***25801 小时前
JavaScript在Node.js中的Deno
开发语言·javascript·node.js
weixin79893765432...1 小时前
Vue + Express + DeepSeek 实现一个简单的对话式 AI 应用
vue.js·人工智能·express
高级程序源1 小时前
springboot社区医疗中心预约挂号平台app-计算机毕业设计源码16750
java·vue.js·spring boot·mysql·spring·maven·mybatis
cypking1 小时前
Vue 3 + Vite + Router + Pinia + Element Plus + Monorepo + qiankun 构建企业级中后台前端框架
前端·javascript·vue.js
San30.2 小时前
ES6+ 新特性解析:让 JavaScript 开发更优雅高效
开发语言·javascript·es6
雨雨雨雨雨别下啦2 小时前
【从0开始学前端】vue3简介、核心代码、生命周期
前端·vue.js·vue
simon_93492 小时前
受够了压缩和收费?我作为一个码农,手撸了一款无限容量、原图直出的瀑布流相册!
前端
e***87703 小时前
windows配置永久路由
android·前端·后端