AntDesignVue中树组件默认不展开所有节点问题解决
问题描述在使用Ant-Design-Vue的树组件时,发现根据文档API设置自动展开所有节点属性后,不起作用。后来发现,是因为在初始化的时候数据还没有,所以设置属性就不生效,应该加个判断,等到有数据后,页面再渲染组件就可以了。有问题的写法<a-treev-model="selectedMenus":checkable="true"selectable="false":defaultExpan
·
问题描述
在使用Ant-Design-Vue的树组件时,发现根据文档API设置自动展开所有节点属性后,不起作用。后来发现,是因为在初始化的时候数据还没有,所以设置属性就不生效,应该加个判断,等到有数据后,页面再渲染组件就可以了。
有问题的写法
<a-tree
v-model="selectedMenus"
:checkable="true"
selectable="false"
:defaultExpandAll="true"
:defaultExpandParent="true"
tree-data="menuTree"
@check="onMenuSelected" >
<template slot="title" scope="menuInfo">
<div class="btnContext" style="font-size: 16px">
<i :class="menuInfo.attributes.icon"/>
<span v-text="menuInfo.title"/>
</div>
</template>
</a-tree>
解决办法
增加数据判断,有数据时才渲染tree组件
v-if="menuTree[0].children.length > 0"
这里,我的数据模型如下:
menuTree:[
{
title: '系统菜单',
key: '0',
attributes:{
icon:'ri-building-line'
},
children: []
}
]
更多推荐
已为社区贡献4条内容
所有评论(0)