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 必知必会之closure
Sep 21 Javascript
js parsefloat parseint 转换函数
Jan 21 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
微信小程序如何获取用户信息
Jan 26 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
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
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
新浪的图片新闻效果
2007/01/13 Javascript
jQuery 浮动广告实现代码
2008/12/25 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
python中实现栈的三种方法
2020/12/19 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
马来西亚网上购物:Youbeli
2018/03/30 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
大学生操行评语大全
2014/12/31 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
2016春季运动会开幕词
2016/03/04 职场文书