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 相关文章推荐
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
JS控件的生命周期介绍
Oct 22 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
Python学习资料
2007/02/08 Python
Python的标准模块包json详解
2017/03/13 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Selenium定位元素操作示例
2018/08/10 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
《风筝》教学反思
2014/04/10 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
2019年最新借条范本!
2019/07/08 职场文书
Django操作cookie的实现
2021/05/26 Python
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL