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中实现块作用域的方法
Apr 01 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
vue-dialog的弹出层组件
May 25 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
浅析node.js的模块加载机制
May 25 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 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连接mssql的一些相关经验及注意事项
2013/02/05 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python continue语句用法实例
2014/03/11 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
基于Django用户认证系统详解
2018/02/21 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
python 自动批量打开网页的示例
2019/02/21 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
NumPy排序的实现
2020/01/21 Python
Python如何实现定时器功能
2020/05/28 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
护理专业毕业生推荐信
2013/10/31 职场文书
门卫班长岗位职责
2013/12/15 职场文书
考核工作实施方案
2014/03/30 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android