Element ui全部数据前端排序

1.首先给el-table绑定sort-change监听

<el-table ref="filterTable" :data="historyList.slice((pageNum-1)*pageSize,pageNum*pageSize)" @sort-change="sortChange">

2.给需要排序的列设置sortable属性

<el-table-column label="数据时间" prop="time" sortable='custom'></el-table-column>

3.定义触发排序方法

//排序触发事件
sortChange(column){this.pageNum = 1if(column.order === 'ascending'){this.historyList.sort(this.ascSortFun)}else if(column.order === 'descending'){this.historyList.sort(this.desSortFun)}else{//取消排序则重新获取列表，恢复默认状态。this.showHistory()}
},

column中有两个属性分别是 prop 和 order

当对多个列进行排序时需要通过判断column.prop的值来确定列。

当点击升序按钮时column.order ===“ascending”

点击降序按钮时column.order === ‘descending’

这里还用到了自定义排序方法

//升序排列方法
ascSortFun(a, b) {//这里直接return a.time-b.time即可if (a.time > b.time) return 1;if (a.time == b.time) return 0;if (a.time < b.time) return -1;
},
//降序排列方法
desSortFun(a,b){//这里直接return b.time-a.time即可if (a.time > b.time) return -1;if (a.time == b.time) return 0;if (a.time < b.time) return 1;
}

4.多列排序

注意：当多个列排序时为了方便需要先定义一个 存放column.prop的字符串值 的变量。

data() {return {historyList: [], proptype: ""};}

在排序触发事件时先判断触发排序的是哪一列

//排序触发事件
sortChange(column){this.pageNum = 1if (column.prop === "time") {this.proptype = column.prop;// 将键名prop赋值给变量proptypeif(column.order === 'ascending'){this.historyList.sort(this.ascSortFun)}else if(column.order === 'descending'){this.historyList.sort(this.desSortFun)}else{//取消排序则重新获取列表，恢复默认状态。this.showHistory()}}else if(column.prop === "id"){this.proptype = column.prop;// 将键名prop赋值给变量proptype//.....}
},

这样做的好处是在写排序方法时直接用proptype即可

//升序排列方法
ascSortFun(a, b) {return a[this.proptype] - b[this.proptype];
},
//降序排列方法
desSortFun(a,b){return b[this.proptype] - a[this.proptype];
}

Element ui全部数据前端排序相关推荐

element ui 图片控件排序_vuedraggable+element ui实现页面控件拖拽排序效果
项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下如上图要实现这些控件的拖拽排序这是拖拽后由于公司网络的原因,项目没有使用npm,都是使用的引入的 ...
element ui 图片控件排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统开源项目推荐 1.什么是ElementUI 官网:https://el ...
Element UI 表格数据格式化
无插槽时的数据格式化无插槽的情况下,使用 el-table-column 的formatter属性,可以格式化指定列的值 <el-table-columnprop="address& ...
element ui 图片控件排序_Element-ui上传图片后隐藏上存控件
在使用Element-ui el-upload组件的时候,发现我只想上存一张图片,比如头像的上存,然而上存一张后,控件还可以继续上存. 一下的方法是Element-ui上传图片后隐藏上存控件. 在el ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
Element UI 表格单选、多选情景
最近在使用Element UI编写简单前端页面时会遇到需要对表格进行选择操作的场景.在网络上面查询资料时发现实现方式多的看花眼,索性自己总结一个. 话不多说,搬代码来看看- 单选: <templ ...
DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板
DataGear 数据可视化看板内置了一些基本.简单的页面交互组件,当它们无法满足实际看板需求时,可以引入更流行和强大的前端框架. 本文以Vue2.Element UI前端框架为例,介绍如何制作具有更 ...
前端笔记-在Element UI中表格如何根据数据动态变化显示
前言实际上我需要的功能类似于前端工程中的字典.由于在前端的学习自己写代码的过程中可能不会对一个项目工程化的如此的彻底,所以这里给出了一种解决方法. 需求对于Element UI里的表格,如果假设传 ...
《前端》Element ui 表格（Table）组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...

Element ui全部数据前端排序

Element ui全部数据前端排序

1.首先给el-table绑定sort-change监听

2.给需要排序的列设置sortable属性

3.定义触发排序方法

4.多列排序

Element ui全部数据前端排序相关推荐

最新文章

热门文章