需求
使用ant-design-vue框架,展开下拉树组件中全部树节点
解决方案
参数控制
使用 ant-design 框架中自带的 treeDefaultExpandAll 参数,将其设置为 true。
注意:这时候这个地方是不生效的,原因是此参数仅在该组件第一次渲染时有效。不仅仅是下拉树组件,ant-design 框架中所有具备
默认属性 的组件大多数都是这种逻辑。
所以如果当前 treeData 是通过接口获取的数据,则可以将下拉树组件通过 v-if 设置为 false,当treeData存在数据时设置为 true。
<template v-if="treeData.length!==0">
<a-tree-select
v-model='data'
:tree-data='treeData'
:treeDefaultExpandAll="true"
placeholder='请选择数据'
/>
</template>
设置选中
获取 treeData 中的全部数据,将数据中父级id全部取出来,传给 treeExpandedKeys 参数,设置节点展开。
let treeDatas = lookForAllId(treeData);
function lookForAllId(data = [], arr = []) {
for (let item of data) {
arr.push(item.id);
if (item.children && item.children.length)
this.lookForAllId(item.children, arr);
}
return arr;
}