element-ui tree树形控件单个选择节点

element-ui tree控件单个选择节点

element-ui tree怎么选择单个叶子节点的解决方案。实现的效果如下：

废话不多说，上代码（如下图）：

html：

<div class="recursionTree" v-if="showHierarchy">
<el-tree :data="data2" :props="defaultProps" ref="tree"
:expand-on-click-node="false" node-key="id"
:default-expanded-keys="[bbb]"
:highlight-current="true" :check-on-click-node="true"
@node-click="handleNodeClick">
</el-tree>
</div>

js：

onChangeBlur () {
this.showHierarchy = !this.showHierarchy;
if (this.showHierarchy) { // true 是展开 tree选择项
this.$nextTick(function () {
this.$refs.tree.setCurrentKey(this.bbb)
})
}
},
handleNodeClick(data) {
this.aaa = data.label;// 当前选中的名称
this.bbb = data.id; // 当前选中id
this.showHierarchy = false;
}

数据结构：

data2: [
{ // 编辑新增 tree
id: 1,
label: '一级 1',
children: [{
id: 11,
label: '二级 1-1',
children: [{
id:111,
label: '三级 1-1-1'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 21,
label: '二级 2-1',
children: [{
id: 211,
label: '三级 2-1-1'
}]
}, {
id: 22,
label: '二级 2-2',
children: [{
id:221,
label: '三级 2-2-1'
}]
}]
}, {
id: 3,
label: '一级 3',
children: [{
id:31,
label: '二级 3-1',
children: [{
id:311,
label: '三级 3-1-1'
}]
}, {
id:32,
label: '二级 3-2',
children: [{
id:321,
label: '三级 3-2-1'
}]
}]
}]

整体代码就是这样了，有遇到和我一样问题的小伙伴可以参考哦~