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

 更新时间:2020年10月26日 09:06:15   作者:温九月  
这篇文章主要介绍了解决ant design vue中树形控件defaultExpandAll设置无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

页面步骤:

1.设置a-tree标签

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

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

结果:

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

原因:

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

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

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

补充知识:Ant Design 中Tree踩坑

Tree中的api属性有一个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设置无效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vite中使用@配置路径别名过程示例

    vite中使用@配置路径别名过程示例

    这篇文章主要为大家介绍了vite中使用@配置路径别名过程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue项目从node8.x升级到12.x后的问题解决

    vue项目从node8.x升级到12.x后的问题解决

    这篇文章主要介绍了vue项目从node8.x升级到12.x后的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 手把手搭建安装基于windows的Vue.js运行环境

    手把手搭建安装基于windows的Vue.js运行环境

    手把手教大家搭建安装基于windows的Vue.js的运行环境,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 基于Vue如何封装分页组件

    基于Vue如何封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能,接下来通过本文给大家分享一个封装分页组件的方法,一起看看吧
    2016-12-12
  • 基于VUE的v-charts的曲线显示功能

    基于VUE的v-charts的曲线显示功能

    这篇文章主要介绍了基于VUE的v-charts的曲线显示功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • Vue组件设计-Sticky布局效果示例

    Vue组件设计-Sticky布局效果示例

    这篇文章主要介绍了Vue组件设计-Sticky布局,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • 如何使用Vue+Element做个个人中心

    如何使用Vue+Element做个个人中心

    我们在做了用户登录后,就会让用户跳转到个人中心,下面这篇文章主要给大家介绍了关于如何使用Vue+Element做个个人中心的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • vue :style设置背景图片方式backgroundImage

    vue :style设置背景图片方式backgroundImage

    这篇文章主要介绍了vue :style设置背景图片方式backgroundImage,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 基于canvas实现手写签名(vue)

    基于canvas实现手写签名(vue)

    这篇文章主要为大家详细介绍了基于canvas实现简易的手写签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • Vue cli3 库模式搭建组件库并发布到 npm的流程

    Vue cli3 库模式搭建组件库并发布到 npm的流程

    这篇文章主要介绍了Vue cli3 库模式搭建组件库并发布到 npm,以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程,需要的朋友可以参考下
    2018-10-10

最新评论