使用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

目录
相关文章
|
JavaScript 前端开发
49jqGrid 分组 - 分组行折叠
49jqGrid 分组 - 分组行折叠
60 0
|
8月前
用dragstart、drag、dragend、dragover、drop、dragleave实现针对表格列的顺序进行拖拽排序(附带实现选择某几列数据显示或隐藏)
用dragstart、drag、dragend、dragover、drop、dragleave实现针对表格列的顺序进行拖拽排序(附带实现选择某几列数据显示或隐藏)
|
5月前
|
JavaScript 前端开发 开发者
"震撼揭秘!ElementUI Table组件大变身,一键自定义升序降序按钮,排序操作秒变炫酷舞台,点击即燃,你的列表排序从此不再平凡!"
【8月更文挑战第16天】在Vue.js开发中,ElementUI的Table组件因其实用性和灵活性深受喜爱。本文通过一个后台管理系统用户列表的案例,展示了如何自定义添加“升序”和“降序”按钮以增强排序功能。首先确保安装Vue与ElementUI;接着定义表格数据及初始排序状态;利用scoped slot自定义列模板,加入按钮并绑定点击事件;最后实现在点击按钮时更新排序状态并重新排序数据的逻辑。这种方法不仅改善了用户体验,还为开发者提供了灵活调整排序逻辑的空间。
189 3
|
6月前
|
JavaScript
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
317 1
|
8月前
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
|
JavaScript
Vue实现以按钮弹框动态控制Table列展示
点击设置弹出列数,并根据选择列进行展示:
208 0
|
8月前
|
缓存 JavaScript 前端开发
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
154 0
|
前端开发
bootstrap table表格去掉排序箭头
bootstrap table表格去掉排序箭头
217 2
|
JavaScript
VUE element-ui之table表格勾选复选框动态合计某列的值
VUE element-ui之table表格勾选复选框动态合计某列的值
661 0
VUE element-ui之table表格勾选复选框动态合计某列的值
|
JavaScript 前端开发 Java
54jqGrid 分组 - 折叠汇总行
54jqGrid 分组 - 折叠汇总行
74 0

热门文章

最新文章

下一篇
开通oss服务