效果图:
<el-tree
ref="tree"
highlight-current="true"
:data="lvelList"
:props="defaultProps"
@node-click="handleNodeClick">
</el-tree>
methods: {
handleNodeClick(data) {
this.$refs.tree.setCurrentKey(data.$treeNodeId)
},
},
页面刷新保持高亮
<el-tree ref="tree"
node-key="id" // 需设置
highlight-current="true"
default-expand-all
:data="lvelList"
:props="defaultProps"
@node-click="handleNodeClick">
</el-tree>
lvelList: [
{
label: '我的待办',
children: [{
label: '问题管理',
children: [{
id:'3', // 设置id 很关键
label: '视频问题'
},{
label: '水质问题'
}],
}, {
label: '专项行动',
}, {
label: '年度目标',
}]
},
]
mounted: {
this.$nextTick(()=>{
this.$refs.tree.setCurrentKey(3)
})
}
展开某个父节点
:default-expanded-keys="expandedKeys"
this.expandedKeys = [];
for (var i = 0; i < this.lvelList.length; i++) {
this.expandedKeys.push(this.lvelList[i].id);//循环data的数据,把对应要展开的节点id放入展开的数组中
}
自定义样式
<el-tree ref="tree"
node-key="id"
default-expand-all
highlight-current
:data="lvelList"
:props="defaultProps"
:default-expanded-keys="expandedKeys"
@node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
// 这个是label 显示不会改变
<span>{{ node.label }}</span>
<span class="todoCount" v-if="todoCount>0&& node.id==4">{{todoCount}}</span>
<span class="todoCount" v-if="node.id==5">9999</span>
</span>
</el-tree>