design vue 表格开启列排序的操作


Posted in Javascript onOctober 28, 2020

开启排序

1、本地数据排序

column数据设置,需要开启的列设置sorter: (a, b) => a.address.length - b.address.length, 自定义排序方法

2、服务端排序sorter设置true

点击排序,表格触发change方法,接受参数

change (pagination, filters, sorter, { currentDataSource })

第三个参数就是排序信息

{field, order}

<a-table
   :columns="header"
   :dataSource="body"
   :pagination="pagination"
   @change="handleTableChange"
  >
 
methods: {
  handleTableChange (pagination, filters, {field, order}) {
   this.sort = {
    field: field || '',
    order: order || ''
   }
   
   this.pagination.current = pagination.current
   this.getList()
  },
}

如何设置第一次点击是降序

ant design vue 表格排序,默认点击排序顺序是[升序,降序,不排序] 如此循环

如何设置先降序后升序呢,api文档有提到

design vue 表格开启列排序的操作

1、可以在column的每一项设置sortDirections: ['descend', 'ascend']

2、在表格直接设置sortDirections

<a-table
   :columns="header"
   :dataSource="body"
   :pagination="pagination"
   @change="handleTableChange"
   :sortDirections="['descend', 'ascend']" // 这里
  >

3、用['descend' | 'ascend']写法不行,用数组['descend', 'ascend']

4、设置defaultSortOrder没有效果

补充知识:Ant Design Vue实现的表格排序点击第三次取消排序的解决方法

design vue 表格开启列排序的操作

design vue 表格开启列排序的操作

design vue 表格开启列排序的操作

以上这篇design vue 表格开启列排序的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JavaScript库还是自己写代码?
Jan 28 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 #Javascript
JS实现多功能计算器
Oct 28 #Javascript
JS实现简单贪吃蛇小游戏
Oct 28 #Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 #Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 #Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 #Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 #Javascript
You might like
索尼ICF-SW100收音机评测
2021/03/02 无线电
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
php去除HTML标签实例
2013/11/06 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
vuex的使用步骤
2021/01/06 Vue.js
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
python中time tzset()函数实例用法
2021/02/18 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
生产部厂长职位说明书
2014/03/03 职场文书
材料员岗位职责
2014/03/13 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
2014最新实习证明模板
2014/10/02 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
门面房租房协议书
2014/12/01 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
2015年市场部工作总结
2015/04/30 职场文书
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
SQL SERVER中的流程控制语句
2022/05/25 SQL Server