解决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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 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
PHP 木马攻击防御技巧
2009/06/13 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
javascript 二维数组的实现与应用
2010/03/16 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
javascript数组详解
2014/10/22 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
使用Python进行目录的对比方法
2018/11/01 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
使用Python实现音频双通道分离
2020/12/25 Python
一个精品风格的世界:Atterley
2019/05/01 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
高校毕业生自我鉴定
2013/10/27 职场文书
人事主管岗位职责范本
2013/12/04 职场文书
食品安全承诺书
2014/05/22 职场文书
入股协议书范本
2014/11/01 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
工作表现证明
2015/06/15 职场文书
会议营销主持词
2015/07/03 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫