Tree树形控件 ,defaultExpandAll 仅在组件第一次渲染时有效,tree组件、其它组件的defaultXXX值都是这个行为。
解决:
treeData数据:
treeData = [{
title: '权限管理',
key: '0-0',
children: [{
title: '用户管理',
key: '0-0-0',
children: [{
title: '全选',
key: '0-0-0-0'
},
{
title: '新增',
key: '0-0-0-1'
},
{
title: '查询',
key: '0-0-0-2'
},
{
title: '详情',
key: '0-0-0-3'
},
{
title: '修改',
key: '0-0-0-4'
},
{
title: '删除',
key: '0-0-0-5'
},
{
title: '导入',
key: '0-0-0-6'
},
{
title: '导出',
key: '0-0-0-7'
}
]
},
{
title: '0-0-1',
key: '0-0-1',
children: [{
title: '0-0-1-0',
key: '0-0-1-0',
class: 'last',
children: [{
title: '新增',
key: '0-0-1-0-2'
},
{
title: '删除',
key: '0-0-1-1-2'
},
{
title: '修改',
key: '0-0-1-2-2'
}
]
},
{
title: '0-0-1-1',
key: '0-0-1-1'
},
{
title: '0-0-1-2',
key: '0-0-1-2'
}
]
},
{
title: '0-0-2',
key: '0-0-2'
}
]
},
{
title: '0-1',
key: '0-1',
children: [{
title: '0-1-0-0',
key: '0-1-0-0'
},
{
title: '0-1-0-1',
key: '0-1-0-1'
},
{
title: '0-1-0-2',
key: '0-1-0-2'
}
]
},
{
title: '0-2',
key: '0-2'
}
]
第一步:v-if="treeData && treeData.length > 0"
<a-switch
checked-children="展开全部"
un-checked-children="关闭全部"
default-checked
@change="switchMenu"/></a>
<a-tree
v-if="treeData && treeData.length > 0"
v-model="dataSopeMenu"
checkable
:defaultExpandAll="defaultExpandAllMenu"
:tree-data="treeData"
/>
第二步:
// @change="switchMenu"
switchMenu(value, option){
console.log(value)
//defaultExpandAll 仅在组件第一次渲染时有效,实现展开收起的效果,做点手脚
let treeData_ = this.treeData
this.treeData = []
setTimeout(()=>{
this.defaultExpandAllMenu = value
this.treeData = treeData_
},500)
},