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

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

写法非常简单

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

目录
打赏
0
0
0
0
176
分享
相关文章
数据结构实践项目——排序
本文是[数据结构基础系列(9):排序]课程的实践项目。 本文针对: 1. 排序问题及导学 2. 插入排序之直接插入排序 3. 插入排序之希尔排序 4. 交换排序之冒泡排序 5. 交换排序之快速排序 6. 选择排序之直接选择排序 7. 选择排序之堆排序 8. 归并排序 9. 简单的计数排序 10. 基数排序 11. 各种排序的比较 纸上谈兵:“
1819 0
"震撼揭秘!ElementUI Table组件大变身,一键自定义升序降序按钮,排序操作秒变炫酷舞台,点击即燃,你的列表排序从此不再平凡!"
【8月更文挑战第16天】在Vue.js开发中,ElementUI的Table组件因其实用性和灵活性深受喜爱。本文通过一个后台管理系统用户列表的案例,展示了如何自定义添加“升序”和“降序”按钮以增强排序功能。首先确保安装Vue与ElementUI;接着定义表格数据及初始排序状态;利用scoped slot自定义列模板,加入按钮并绑定点击事件;最后实现在点击按钮时更新排序状态并重新排序数据的逻辑。这种方法不仅改善了用户体验,还为开发者提供了灵活调整排序逻辑的空间。
257 3
使用ElementUi的table组件自定义添加升序、降序按钮和点击事件及排序
使用ElementUi的table组件自定义添加升序、降序按钮和点击事件及排序
10225 2
unity3dC#的List升序降序排序
List.Sort有三种结果 1,-1,0分别是大,小,相等 升序降序比较,默认List的排序是升序排序 如果要降序排序,也很简单,只需要在前面加一个负号 List tmp = new List(){5,1,22,11,4}; // 升序 tmp.
979 0
|
10月前
自定义排序的常用方式
自定义排序的常用方式
python字典排序、列表排序、升序、降序、逆序如何区别使用?
python字典排序、列表排序、升序、降序、逆序如何区别使用?
333 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等