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 相关文章推荐
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
关于webpack代码拆分的解析
Jul 20 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 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中var_export与var_dump的区别分析
2010/08/21 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
前端必学之PHP语法基础
2016/01/01 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
jQuery的学习步骤
2011/02/23 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
开业庆典答谢词
2014/01/18 职场文书
法人授权委托书
2014/04/03 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
争先创优活动总结
2014/08/27 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
返乡农民工证明
2015/06/24 职场文书
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android