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

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

写法非常简单

前端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

相关文章
|
3月前
|
JavaScript 前端开发 开发者
"震撼揭秘!ElementUI Table组件大变身,一键自定义升序降序按钮,排序操作秒变炫酷舞台,点击即燃,你的列表排序从此不再平凡!"
【8月更文挑战第16天】在Vue.js开发中,ElementUI的Table组件因其实用性和灵活性深受喜爱。本文通过一个后台管理系统用户列表的案例,展示了如何自定义添加“升序”和“降序”按钮以增强排序功能。首先确保安装Vue与ElementUI;接着定义表格数据及初始排序状态;利用scoped slot自定义列模板,加入按钮并绑定点击事件;最后实现在点击按钮时更新排序状态并重新排序数据的逻辑。这种方法不仅改善了用户体验,还为开发者提供了灵活调整排序逻辑的空间。
114 3
|
人工智能 算法 搜索推荐
|
存储 算法 搜索推荐
|
JavaScript
js时间排序函数(升序,降序)
js时间排序函数(升序,降序)
275 0
|
SQL 搜索推荐 关系型数据库
B+树索引使用(8)排序使用及其注意事项(二十)
B+树索引使用(8)排序使用及其注意事项(二十)
|
Java
Java基础 --- 利用冒泡排序实现对一组数字的升序与降序排列
Java基础 --- 利用冒泡排序实现对一组数字的升序与降序排列
286 0
Java基础 --- 利用冒泡排序实现对一组数字的升序与降序排列
|
数据格式
对象数组进行升序排列,并组装数据格式
对象数组进行升序排列,并组装数据格式
对象数组进行升序排列,并组装数据格式
ORDER BY排序太简单?那是因为你还没用过这四大排序函数!
我们在写SQL代码时,只要有排序,首先想到的肯定是ORDER BY,以至于好多小伙伴觉得排序多简单啊。 今天就给大家介绍四个你不怎么常用排序函数,他们就是SQL Server排序中经常用到的ROW_NUMBER(),RANK(),DENSE_RANK(),NTILE()这四个好兄弟。
ORDER BY排序太简单?那是因为你还没用过这四大排序函数!
|
小程序 JavaScript API
小程序实现索引列表排序
小程序实现索引列表排序
396 0
|
vr&ar
使用ElementUi的table组件自定义添加升序、降序按钮和点击事件及排序
使用ElementUi的table组件自定义添加升序、降序按钮和点击事件及排序
10104 2