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 相关文章推荐
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
Vue指令实现OutClick的示例
Nov 16 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/07/22 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
学习jQuey中的return false
2015/12/18 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
理解Python垃圾回收机制
2016/02/12 Python
Python网络编程详解
2017/10/31 Python
python实现视频分帧效果
2019/05/31 Python
django settings.py 配置文件及介绍
2019/07/15 Python
python web框架中实现原生分页
2019/09/08 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
一套PHP的笔试题
2013/05/31 面试题
Yahoo-PHP面试题2
2014/12/06 面试题
2014年基建工作总结
2014/12/12 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL