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 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
iframe实用操作锦集
Apr 22 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
JavaScript运动框架 多值运动(四)
May 18 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中文本操作的类
2007/03/17 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
javascript操作文本框readOnly
2007/05/15 Javascript
jquery 表单取值常用代码
2009/12/22 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
Python实现的批量下载RFC文档
2015/03/10 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
Python使用Pygame绘制时钟
2020/11/29 Python
C++程序员求职信范文
2014/04/14 职场文书
教师教学评估方案
2014/05/09 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
毕业生实习证明
2014/09/19 职场文书
2016年父亲节寄语
2015/12/04 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS