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 相关文章推荐
JQuery 入门实例1
Jun 25 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
js验证密码强度解析
Mar 18 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
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 中的输出缓冲
2006/12/21 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
浅谈JavaScript 框架分类
2014/11/10 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
python实现跨文件全局变量的方法
2014/07/07 Python
详解Python的三种可变参数
2019/05/08 Python
在django中,关于session的通用设置方法
2019/08/06 Python
python生成并处理uuid的实现方式
2020/03/03 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
小学开学寄语
2014/01/19 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
库房管理员岗位职责
2015/02/12 职场文书
法制主题班会教案
2015/08/13 职场文书
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers