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

目录
相关文章
|
6月前
|
JavaScript 前端开发
49jqGrid 分组 - 分组行折叠
49jqGrid 分组 - 分组行折叠
22 0
|
10天前
用dragstart、drag、dragend、dragover、drop、dragleave实现针对表格列的顺序进行拖拽排序(附带实现选择某几列数据显示或隐藏)
用dragstart、drag、dragend、dragover、drop、dragleave实现针对表格列的顺序进行拖拽排序(附带实现选择某几列数据显示或隐藏)
|
6月前
|
JavaScript 前端开发 Java
54jqGrid 分组 - 折叠汇总行
54jqGrid 分组 - 折叠汇总行
17 0
|
8月前
|
JavaScript
Vue列表过滤+列表排序
Vue列表过滤+列表排序
|
JavaScript
VUE element-ui之table表格勾选复选框动态合计某列的值
VUE element-ui之table表格勾选复选框动态合计某列的值
503 0
VUE element-ui之table表格勾选复选框动态合计某列的值
|
XML JavaScript 前端开发
若依框架实现表格按照属性排序 升序或降序
若依框架实现表格按照属性排序 升序或降序
1260 0
若依框架实现表格按照属性排序 升序或降序
|
JavaScript
在vue里用sortablejs实现element表格列表的行排序?
在vue里用sortablejs实现element表格列表的行排序?
120 0
饿了么UI中的el-table常见的翻页勾选和序号递增功能实现步骤
饿了么UI中的el-table常见的翻页勾选和序号递增功能实现步骤
234 0
|
JavaScript
VUE element-ui之table表格表头下拉筛选功能
VUE element-ui之table表格表头下拉筛选功能
837 0
VUE element-ui之table表格表头下拉筛选功能
|
JavaScript
VUE element-ui 之table表格勾选复选框动态带出(将某列的值赋值给指定列)对应列的数据
VUE element-ui 之table表格勾选复选框动态带出(将某列的值赋值给指定列)对应列的数据
880 0
VUE element-ui 之table表格勾选复选框动态带出(将某列的值赋值给指定列)对应列的数据