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 getComputedStyle获取和设置style的原理
Oct 10 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 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
日本十大惊悚动漫
2020/03/04 日漫
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
使用python绘制人人网好友关系图示例
2014/04/01 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
python中有函数重载吗
2020/05/28 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
敏捷开发的主要原则都有哪些
2015/04/26 面试题
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
应急管理工作总结2015
2015/05/04 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
nginx请求限制配置方法
2021/07/09 Servers
java项目构建Gradle的使用教程
2022/03/24 Java/Android