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 相关文章推荐
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
jQuery简单实现日历的方法
May 04 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 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
PHP Token(令牌)设计
2008/03/15 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
Python callable内置函数原理解析
2020/03/05 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
期末考试动员演讲稿
2014/01/10 职场文书
二手书店创业计划书
2014/01/16 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
英语课外活动总结
2014/08/27 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
暂住证证明
2015/06/19 职场文书
JS的深浅复制详细
2021/10/16 Javascript
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server