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 相关文章推荐
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
js实现页面导航层级指示效果
Aug 25 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
第八节--访问方式
2006/11/16 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
php递归json类实例
2014/12/02 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
Python collections模块实例讲解
2014/04/07 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
校园联欢晚会主持词
2014/03/17 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
团委竞选演讲稿
2014/04/24 职场文书
国企干部对照检查材料
2014/08/22 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis
Python可视化神器pyecharts绘制水球图
2022/07/07 Python