vue element table 表格请求后台排序的方法


Posted in Javascript onSeptember 28, 2018

1、ElementUi文档已经说了,如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。

<el-table :data="playerTableData" border style="width: 100%" :default-sort = "{prop: 'outlay', order: 'descending'}" @sort-change='sortChange'>
 <el-table-column prop="nickname" label="昵称"></el-table-column>
</el-table>

2、

sort-change方法自带三个参数,分别代表意义是:

column:当前列

prop:当前列需要排序的数据

order:排序的规则(升序、降序和默认[默认就是没排序])

3、

//排序
 sortChange (column, prop, order){
  console.log(column.prop); //prop标签 => nickname
  console.log(column.order);//descending降序、ascending升序
 },

以上这篇vue element table 表格请求后台排序的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 常用函数库详解
Oct 21 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
js实现微信聊天界面
Aug 09 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 #Javascript
在vue项目中正确使用iconfont的方法
Sep 28 #Javascript
vue项目引入字体.ttf的方法
Sep 28 #Javascript
vue打包相关细节整理(小结)
Sep 28 #Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 #Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 #Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 #Javascript
You might like
大师制作的中短波矿石收音机
2020/04/02 无线电
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
javascript实现playfair和hill密码算法
2014/12/07 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Python Pandas 箱线图的实现
2019/07/23 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
python 实现单例模式的5种方法
2020/09/23 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
销售高级职员求职信
2013/10/29 职场文书
法学个人求职信范文
2014/01/27 职场文书
火车来了教学反思
2014/02/11 职场文书
2014年教师节寄语
2014/04/03 职场文书
社区文艺活动方案
2014/08/19 职场文书
技术经济专业求职信
2014/09/03 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
python可视化大屏库big_screen示例详解
2021/11/23 Python
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB