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 必知必会之closure
Sep 21 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 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下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
PHP对象实例化单例方法
2017/01/19 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
JavaScript 继承详解(四)
2009/07/13 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
vue实例的选项总结
2020/06/09 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
pytorch forward两个参数实例
2020/01/17 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
学生喝酒检讨书
2014/02/06 职场文书
美术毕业生求职信
2014/02/25 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
php+laravel 扫码二维码签到功能
2021/05/15 PHP
php修改word的实例方法
2021/11/17 PHP
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android