使用ElementUi的table组件自定义添加升序、降序按钮和点击事件及排序

简介: 使用ElementUi的table组件自定义添加升序、降序按钮和点击事件及排序
先上一张图

image

需求:

只给一级元素OR排序,分解出来的SR和AR不得排序,随着OR的位置顺序变动而变动,注意:每一个OR的唯一标识除了id以外还有_level字段,及OR的_level为1,SR的_level为2

实现:

使用elementui提供的sortable默认是把所有的_level为1和2的所有行都排了一下序,不能满足项目的需求,所以只能自己写

流程如下:

1、给el-table-column添加:render-header="renderHeader"属性

image

2、添加升序、降序图标和点击事件

image

目录
相关文章
|
4月前
用dragstart、drag、dragend、dragover、drop、dragleave实现针对表格列的顺序进行拖拽排序(附带实现选择某几列数据显示或隐藏)
用dragstart、drag、dragend、dragover、drop、dragleave实现针对表格列的顺序进行拖拽排序(附带实现选择某几列数据显示或隐藏)
|
1月前
|
JavaScript 前端开发 开发者
"震撼揭秘!ElementUI Table组件大变身,一键自定义升序降序按钮,排序操作秒变炫酷舞台,点击即燃,你的列表排序从此不再平凡!"
【8月更文挑战第16天】在Vue.js开发中,ElementUI的Table组件因其实用性和灵活性深受喜爱。本文通过一个后台管理系统用户列表的案例,展示了如何自定义添加“升序”和“降序”按钮以增强排序功能。首先确保安装Vue与ElementUI;接着定义表格数据及初始排序状态;利用scoped slot自定义列模板,加入按钮并绑定点击事件;最后实现在点击按钮时更新排序状态并重新排序数据的逻辑。这种方法不仅改善了用户体验,还为开发者提供了灵活调整排序逻辑的空间。
58 3
|
2月前
|
JavaScript
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
138 1
|
2月前
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
43 0
Element UI 多选表格【翻页多选】简易版(不支持翻页多选数据反显)
|
4月前
|
缓存 JavaScript 前端开发
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
|
11月前
|
JavaScript 前端开发 Java
54jqGrid 分组 - 折叠汇总行
54jqGrid 分组 - 折叠汇总行
46 0
|
JavaScript 前端开发 索引
Vue中拖动排序功能,引入SortableJs,前端拖动排序。
Vue中拖动排序功能,引入SortableJs,前端拖动排序。
217 0
|
XML JavaScript 前端开发
若依框架实现表格按照属性排序 升序或降序
若依框架实现表格按照属性排序 升序或降序
1831 0
若依框架实现表格按照属性排序 升序或降序
饿了么UI中的el-table常见的翻页勾选和序号递增功能实现步骤
饿了么UI中的el-table常见的翻页勾选和序号递增功能实现步骤
303 0
|
JavaScript
VUE element-ui之table表格表头下拉筛选功能
VUE element-ui之table表格表头下拉筛选功能
976 0
VUE element-ui之table表格表头下拉筛选功能