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 面向对象全新理练之原型继承
Dec 03 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 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
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
javascript radio 联动效果
2009/03/04 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
英国电子专家:maplin
2019/09/04 全球购物
机电专业个人求职信范文
2013/12/30 职场文书
个人党性剖析材料
2014/02/03 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
对教师的评语
2014/04/28 职场文书
统计员岗位职责
2015/02/11 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang