若依框架实现表格按照属性排序 升序或降序

简介: 若依框架实现表格按照属性排序 升序或降序

写法非常简单

前端Vue页面


  1. 在表格上加监听函数@sort-change

  2. 在表行上加排序字:sort-orders、可排序字sortable

  3. 实现监听函数。

  代码如下:

<el-table v-loading="loading" :data="equipList" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
          <el-table-column label="创建时间" align="center" prop="createTime"  width="160" :sort-orders="['descending','ascending']" sortable="custom">
handleSortChange(column) {
      this.queryParams.orderByColumn = column.prop;//查询字段是表格中字段名字
      this.queryParams.isAsc = column.order;//动态取值排序顺序
      this.getList();
    }

后端XML代码


  在selectList里面加上参数解析即可,如下:

image.png

实现原理


  若依框架后端里面已经封装好对应的解析代码了:

image.png

image.png

相关文章
|
4天前
|
JavaScript 前端开发 开发者
"震撼揭秘!ElementUI Table组件大变身,一键自定义升序降序按钮,排序操作秒变炫酷舞台,点击即燃,你的列表排序从此不再平凡!"
【8月更文挑战第16天】在Vue.js开发中,ElementUI的Table组件因其实用性和灵活性深受喜爱。本文通过一个后台管理系统用户列表的案例,展示了如何自定义添加“升序”和“降序”按钮以增强排序功能。首先确保安装Vue与ElementUI;接着定义表格数据及初始排序状态;利用scoped slot自定义列模板,加入按钮并绑定点击事件;最后实现在点击按钮时更新排序状态并重新排序数据的逻辑。这种方法不仅改善了用户体验,还为开发者提供了灵活调整排序逻辑的空间。
18 3
【Axure教程】中继器表格集合(增删改查筛选移动排序等效果)
【Axure教程】中继器表格集合(增删改查筛选移动排序等效果)
【Axure教程】中继器表格集合(增删改查筛选移动排序等效果)
|
存储 算法 搜索推荐
|
人工智能 算法 搜索推荐
|
JavaScript
js时间排序函数(升序,降序)
js时间排序函数(升序,降序)
261 0
|
SQL 搜索推荐 关系型数据库
B+树索引使用(8)排序使用及其注意事项(二十)
B+树索引使用(8)排序使用及其注意事项(二十)
拖拽排序-列表布局
拖拽排序-列表布局
174 0
拖拽排序-列表布局
|
数据格式
对象数组进行升序排列,并组装数据格式
对象数组进行升序排列,并组装数据格式
对象数组进行升序排列,并组装数据格式
|
分布式计算 Hadoop 开发者
分组排序案例扩展| 学习笔记
快速学习分组排序案例扩展
分组排序案例扩展| 学习笔记
Excel:利用Excel内置功能实现对某列表格按照条件进行升降序排列
Excel:利用Excel内置功能实现对某列表格按照条件进行升降序排列
Excel:利用Excel内置功能实现对某列表格按照条件进行升降序排列