解决ant design vue中树形控件defaultExpandAll设置无效的问题


Posted in Javascript onOctober 26, 2020

页面步骤:

1.设置a-tree标签

2.默认的treeNodes值设置为空数组

3.在mounted组件加载的时候给treeNodes的值赋值

结果:

设置defaultExpandAll无效,并不能展开所有节点

原因:

defaultExpandAll 仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为,

可以自行搜索受控组件/非受控组件的概念。如果你想异步获取数据后展开全部结点,可以使用非受控方式:

https://codepen.io/lovefemi/pen/MMmRvx

解决ant design vue中树形控件defaultExpandAll设置无效的问题

补充知识:Ant Design 中Tree踩坑

Tree中的api属性有一个defaultExpandAll

解决ant design vue中树形控件defaultExpandAll设置无效的问题

这个属性只在第一次渲染的时候有效,也就是说用户刷新页面后或者在这个页面操作完这个组件后重新渲染的时候,这个值将不会有效。

解决办法:

expandedKeys={help.treeIdData}

onExpand={this.onExpand}

使用expandedKeys属性和onExpand事件进行数据的可控操作

初始化的时候获取所有的TreeKeysr然后将它设置到expandedKeys属性上,当用户操作Tree节点的时候再触发onExpand更新expandedKeys数据

具体思路参考https://reactjs.org/docs/forms.html 或者 https://github.com/ant-design/ant-design/issues/4145#issuecomment-27058096

以上这篇解决ant design vue中树形控件defaultExpandAll设置无效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
vue下载二进制流图片操作
Oct 26 #Javascript
JavaScript如何操作css
Oct 24 #Javascript
javascript实现多边形碰撞检测
Oct 24 #Javascript
解决vue scoped html样式无效的问题
Oct 24 #Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 #Javascript
Ant Design的Table组件去除
Oct 24 #Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 #Javascript
You might like
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
PHP 引用是个坏习惯
2010/03/12 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
用python代码做configure文件
2014/07/20 Python
Python标准库与第三方库详解
2014/07/22 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
店长岗位职责
2013/11/21 职场文书
心得体会范文
2014/01/04 职场文书
廉洁使者实施方案
2014/03/29 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
庆元旦演讲稿
2014/09/15 职场文书
后备干部推荐材料
2014/12/24 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL