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中去掉数组中的重复值的实现方法
Aug 03 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
Vue声明式渲染详解
May 17 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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中如何将数组变量写入文件
2013/06/06 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
Python中的闭包详细介绍和实例
2014/11/21 Python
numpy中矩阵合并的实例
2018/06/15 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
python批量创建指定名称的文件夹
2019/03/21 Python
Python交互式图形编程的实现
2019/07/25 Python
安装docker-compose的两种最简方法
2019/07/30 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
python模块内置属性概念及实例
2021/02/18 Python
财产公证书
2014/04/10 职场文书
家长对老师的评语
2014/04/18 职场文书
借款担保书范文
2014/05/13 职场文书
计生专干事迹
2014/05/28 职场文书
六查六看自查报告
2014/10/14 职场文书
2014年技术员工作总结
2014/11/18 职场文书
八年级英语教学计划
2015/01/23 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
在职证明范本
2015/06/15 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python