element ui的树结构某个节点点击高亮,如何在tab页转换中也一直保持高亮
时间: 2024-02-28 11:54:09 浏览: 95
要实现在tab页转换中也一直保持高亮,可以考虑在点击节点时,将节点的相关信息存储在Vuex中,然后在tab页转换时,根据节点信息来判断当前应该高亮哪个节点。
具体实现步骤如下:
1. 在Vuex中定义一个状态,用来存储当前高亮的节点信息,例如:
```javascript
state: {
activeNode: null // 当前高亮的节点信息
}
```
2. 在点击节点时,将节点信息存储在Vuex中,例如:
```javascript
handleNodeClick(node) {
this.$store.commit('setActiveNode', node)
}
```
3. 在渲染树结构时,根据Vuex中存储的节点信息来设置节点的高亮状态,例如:
```javascript
<el-tree :data="treeData" :highlight-current="true" :current-node-key="activeNode && activeNode.key"></el-tree>
```
4. 在tab页转换时,根据Vuex中存储的节点信息来更新当前高亮的节点信息,例如:
```javascript
watch: {
'$route.path': {
handler(path) {
const node = findNodeByPath(this.treeData, path) // 根据路径查找对应的节点信息
this.$store.commit('setActiveNode', node) // 更新当前高亮的节点信息
},
immediate: true
}
}
```
其中,`findNodeByPath`是一个自定义的方法,用来根据路径查找对应的节点信息。
通过上述步骤,就可以实现在tab页转换中也一直保持高亮的效果。
阅读全文