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实现单继承和多继承的简单方法
Mar 29 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
vue组件命名和props命名代码详解
Sep 01 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基于Snoopy解析网页html的方法
2015/07/09 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
PHP实现百度人脸识别
2019/05/06 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
javascript实现数独解法
2015/03/14 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
python实现月食效果实例代码
2019/06/18 Python
pycharm新建一个python工程步骤
2019/07/16 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
篮球比赛策划方案
2014/06/05 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
运动会通讯稿50字
2015/07/20 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python