java
复制代码
<template>
<div>
<el-card class="box-card">
<!-- <el-tree
:data="treeData"
show-checkbox
node-key="id"
ref="tree"
v-model="currentNodeKey"
check-strictly
highlight-current
@check-change="handleClick"
@check="handleNodeClick"
default-expand-all
>
</el-tree> -->
<el-tree
:data="treeData"
check-strictly
accordion
show-checkbox
node-key="id"
:props="defaultProps"
@check="handleNodeClick"
@check-change="handleClick"
default-expand-all
ref="tree">
</el-tree>
</el-card>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
treeData: [{
id: 0,
label: '一级 0',
children: [{
id: 1,
label: '一级 1',
children: [{
id: 2,
label: '二级 1-1',
children: [{
id: 3,
label: '三级 1-1-1'
}, {
id: 4,
label: '三级 1-1-2'
}]
}]
}, {
id: 5,
label: '一级 2',
children: [{
id: 6,
label: '二级 2-1'
}, {
id: 7,
label: '二级 2-2'
}]
}, {
id: 8,
label: '一级 3',
children: [{
id: 9,
label: '二级 3-1'
}, {
id: 10,
label: '二级 3-2'
}]
},
{
id: 11,
label: '一级 4',
children: null,
},
{
id: 12,
label: '一级 5',
children: null,
},
{
id: 13,
label: '一级 6',
children: null,
},
{
id: 14,
label: '一级 7',
children: null,
},
{
id: 15,
label: '一级 8',
children: null,
},
{
id: 16,
label: '一级 9',
children: null,
}
],
}],
currentNodeKey: null, // 当前选中节点的key
}
},
created() {
},
methods: {
handleClick(data, checked, node) {
if (checked) {
this.currentNodeKey = data.id
this.$refs.tree.setCheckedNodes([data]);
console.log("勾选项目data", data);
console.log("勾选项目checked", checked);
console.log("勾选项目node", node);
}
},
handleNodeClick(data, node, self) {
// 如果已经选中了一个节点,则取消选择
if (this.currentNodeKey && this.$refs.tree) {
this.$refs.tree.setCheckedKeys([]);
// 修改当前选中节点key
this.$refs.tree.setCheckedNodes([data]);
}
// 更新当前选中节点的 key
this.currentNodeKey = data;
},
},
}
</script>
<style>
.box-card {
height: 600px;
}
/* 修改组件样式 */
.el-checkbox__inner {
border-radius: 50%;
border: 1px solid #aaaaaa;
}
/* 隐藏所有子节点 */
/* .el-tree-node__children > .el-tree-node > .el-tree-node__content > .el-checkbox {
display: none;
} */
/* 只显示最深层次节点 */
/* .el-tree {
.is-leaf + .el-checkbox .el-checkbox__inner {
display: none;
}} */
/* 只隐藏根节点勾选框 */
.el-tree>.el-tree-node>.el-tree-node__content .el-checkbox {
display: none;
}
</style>