因为饿了么tree组件不具备展示特定层级的功能,所以此功能顺序栈手动添加完成
<el-tree
ref="refOrgTree"
v-bind="attrs"
class="container-tree"
accordion
lazy
:data="treeData"
:load="loadNode"
node-key="value"
:props="treeProps"
:default-expanded-keys="defaultExpandKeys"//最重要的,必须有
@node-click="handleNodeClick"
/>
因为要展示前两层,所以前两层数据,在你一进页面就必须存在,所以这里要在data里写好前两层的数据,后续层级可以使用懒加载
然后在你获取前两层数据方法里面,指定特定的default-expanded-keys:
const defaultExpandKeys = ref<any[]>([]);
async function initTreeData() {
const rootNode = [
{
level: -1,
value: curSelectAreaInfo.value?.id,
label: curSelectAreaInfo.value?.name
}
];
//获取第二层数据
const res: any = await getChildrenOrgList(curSelectAreaInfo.value?.id);
const children = res.data.map(cur => ({
...cur,
level: 0,
value: cur.areaId,
label: cur.areaName
}));
if (children.length > 0) {
//添加到children里面
rootNode[0].children = children;
}
treeData.value = rootNode;
//设置默认选取第一条数据
nextTick(() => {
setSelectedData(rootNode[0]["value"], true);
params.value.areaId = rootNode[0].value;
selected.value = rootNode[0].value;
});
//设置展开层级的key
defaultExpandKeys.value = [rootNode[0].value].filter(o => o);//这里!!!!!!!!!!
console.log("init tree", rootNode);
}
希望我的描述对你有所帮助!!