单选实现
单选tree.gif
template部分
<template>
<el-tree
:data="treeData"
:props="defaultProps"
node-key="id"
ref="treeForm"
show-checkbox
check-strictly
@check-change="handleNodeClick">
</el-tree>
</template>
数据部分
data() {
return {
checkedId: '',
treeData: [{
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: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods部分
handleNodeClick(data, checked, node) {
if(checked === true) {
this.checkedId = data.id;
this.$refs.treeForm.setCheckedKeys([data.id]);
} else {
if (this.checkedId == data.id) {
this.$refs.treeForm.setCheckedKeys([data.id]);
}
}
}
@check-change事件调用
image.png
单选再次点击取消选中
上面事件通过调用事件check-change,每次节点选中状态发生改变时都会回调，会一直调用setCheckedKeys([])方法，所以会一直选中节点，再次点击不会取消。
将@check-change事件改成使用@check事件。当第二次点击节点的时候，判断check事件的第二个属性树目前的选中状态对象。
ElementUI的tree组件的@check事件.gif
如果checked.checkedKeys为空，说明是取消选中，那么调用setCheckedKeys([])置空就行了。
如果checked.checkedKeys不为空，说明是选择别的节点，那么保持单选状态，也是将点击节点的id传给setCheckedKeys([])方法。
代码如下
<template>
<el-tree
:data="treeData"
:props="defaultProps"
node-key="id"
ref="treeForm"
show-checkbox
check-strictly
@check="handleClick"
>
</el-tree>
</template>
<script>
export default {
data() {
return {
checkedId: '',
treeData: [{
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: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
//@check事件
handleClick(data, checked){
console.log(checked)
console.log(data)
if(checked.checkedKeys != ''){
this.checkedId = data.id;
this.$refs.treeForm.setCheckedKeys([data.id],true);
}else{
this.$refs.treeForm.setCheckedKeys([]);
}
},
//@check-change实现单选
handleNodeClick(data, checked, node) {
if(checked === true) {
this.checkedId = data.id;
this.$refs.treeForm.setCheckedKeys([data.id]);
} else {
if (this.checkedId == data.id) {
this.$refs.treeForm.setCheckedKeys([data.id]);
}
}
}
}
}
</script>