1.构建+配置el-tree树
<div>
<el-tree
:data="data"
:props="defaultProps"
node-key="id"
ref="tree"
highlight-current
@node-click="handleNodeClick"
></el-tree>
</div>
<!-- highlight-current开启高亮,ref="tree"绑定ref,:data="data"树的数据,node-key="id"唯一标识,必须是data中有的唯一 -->
data() {
return {
data: [
{
label: "一级 1",
id: 1,
},
{
label: "二级 2",
id: 2,
},
{
label: "三级 3",
id: 3,
},
],
defaultProps: {
children: "children",
label: "label",
id: "id",
},
};
},
2.默认高亮设置方法
methods: {
chooseTree() {
// 模拟显示高亮为id为2的项
this.$refs.tree.setCurrentKey("2");
},
}
mounted() {
this.chooseTree();
},
//调用
3.效果图