当前位置: 首页 > article >正文

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();
      },


http://www.kler.cn/a/307310.html

相关文章:

  • ESLint 使用教程(五):ESLint 和 Prettier 的结合使用与冲突解决
  • 2411d,右值与移动
  • 【数学二】线性代数-线性方程组-齐次线性方程组、非齐次线性方程组
  • 基于springboot的汽车租赁管理系统的设计与实现
  • 为什么hbase在大数据领域渐渐消失
  • 专题十八_动态规划_斐波那契数列模型_路径问题_算法专题详细总结
  • 腾讯云软件工程师面试问题收集记录-数据库
  • redis简单使用与安装
  • Java并发:互斥锁,读写锁,Condition,StampedLock
  • shopify主题开发之template模板解析
  • C++学习笔记----7、使用类与对象获得高性能(一)---- 书写类(3)
  • 蓝桥杯-基于STM32G432RBT6的LCD进阶(LCD界面切换以及高亮显示界面)
  • 【AIGC】CFG:基于扩散模型分类器差异引导
  • JavaScript 函数 function
  • 用 nextjs 创建 Node+React Demo
  • WebGL入门(048):OES_draw_buffers_indexed 简介、使用方法、示例代码
  • Python---爬虫
  • Leetcode-轮转数组
  • 复现OpenVLA:开源的视觉-语言-动作模型及原理详解
  • 【Go开发】Go语言结构体,与java类不一样的定义方式
  • 推荐|基于springBoot智能推荐的卫生健康系统设计与实现(源码+论文+数据库)
  • 【附源码】用Python开发一个音乐下载工具,并打包EXE文件,所有音乐都能搜索下载!
  • el-table 的单元格 + 图表 + 排序
  • 动手学深度学习(pytorch土堆)-03常见的Transforms
  • 图论篇--代码随想录算法训练营第五十六天打卡| 108. 冗余连接,109. 冗余连接II
  • 【SQL】百题计划:SQL排序Order by的使用。