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 版本]
Mar 20 Javascript
Javascript模板技术
Apr 27 Javascript
jquery.ui.draggable中文文档
Nov 24 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
vue 全局环境切换问题
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 写文本日志实现代码
2010/05/18 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
javascript 面向对象思想 附源码
2009/07/07 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
Java分治归并排序算法实例详解
2017/12/12 Python
django中send_mail功能实现详解
2018/02/06 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
python中cPickle类使用方法详解
2018/08/27 Python
电子商务专业学生的学习自我评价
2013/10/27 职场文书
学生喝酒检讨书
2014/02/06 职场文书
人事专员职责
2014/02/22 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
党员剖析材料范文
2014/12/18 职场文书
大学生学年个人总结
2015/02/15 职场文书