父组件中的html:
<template>
//父组件
<div class="content">
//子组件
<member-tree ref="LeftMemberTree" />
</div>
</template>
父组件中的调取接口获取的id赋值给子组件:
LeftMemberTree.value.currentLayerDeptId =
res.data.deptTreeItemList[0].id;
子组件的html:
<el-tree empty-text="无数据"
:data="deptOptions"
:filter-node-method="methods.filterNode"
node-key="id"
ref="deptOptionsTree"
check-on-click-node
@node-click="methods.handleNodeClick"
highlight-current
:expand-on-click-node="false"
:current-node-key="currentLayerDeptId"></el-tree>
子组件的监听:
// 更改当前选中的样式
watch(
() => state.currentLayerDeptId,
(newVal, oldVal) => {
nextTick(() => {
deptOptionsTree.value.setCurrentKey(newVal);
});
}
);
但是这一步只能做到点亮节点,要做到联动(类似手动点击触发table列表刷新)可以在父组件中也监听id,随着id改变就刷新列表,形成联动