<template>
<div>
首页
<el-tree
ref="eltree"
:data="data"
node-key="id" 这个需要设置
default-expand-all
:highlight-current="true" 这个需要设置
:current-node-key="currentKey" 这个需要设置
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag"
>
</el-tree>
<el-button type="primary" @click="setCurrent">设置选中</el-button>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1"
},
{
id: 10,
label: "三级 1-1-2"
}
]
}
]
},
{
id: 2,
label: "一级 2",
children: [
{
id: "005",
label: "二级 2-1"
},
{
id: "006",
label: "二级 2-2"
}
]
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1"
},
{
id: 8,
label: "二级 3-2",
children: [
{
id: 11,
label: "三级 3-2-1"
},
{
id: 12,
label: "三级 3-2-2"
},
{
id: 13,
label: "三级 3-2-3"
}
]
}
]
}
],
defaultProps: {
children: "children",
label: "label"
},
currentKey: "001"
};
},
methods: {
setCurrent() {
this.$refs.eltree.setCurrentKey("005"); //点击按钮切换显示为005
}
},
mounted() {
this.$nextTick(() => {
this.$refs.eltree.setCurrentKey("006"); //进来就默认选中006
});
}
};
</script>
如果要清除高亮选中状态的话,如下设置当前key为null即可
this.$refs.eltree.setCurrentKey(null);