场景介绍:1.目前界面左边有一个树形的展示数据,其中包含分组和成员,分组包含成员
2.点击分组右边会出现其下所有的成员,成员后可有查看按钮,点击可查看成员详细信息
3.在跳转到成员信息的界面时,同时需要树形图节点状态进行改变,类似于一种双向绑定
思路: 使用 current-node-key 和当前节点的 key 绑定,然后通过 watch 对 节点 key 进行监听,一旦 key 发生变化,watch 中的 nodeKey 便会进行执行,并将当前节点设为我们希望的那个节点,最后再代码 click 这个节点,下边是例子:
el-tree 组件中需要的几个属性:
<el-tree
ref="ownerTree"
node-key="id"
:data="ownerTreeData"
highlight-current
current-node-key="nodeKey"
>
data中添加一个变量:
data(){
return {
nodeKey: ''
}
}
监听函数:
watch:{
nodeKey(val) {
if (val) {
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(val);
this.$nextTick(() => {
document.querySelector(".is-current").firstChild.click();
});
});
}
}
}
自定的函数,可以用于 button 来 @click,也可以其他调用,看自己需要:
methods: {
handleDoIt(id) {
this.nodeKey = id
}
}