需求描述：
大家都知道el-tree可以很明显的通过选中来体现上下节点的父子选中状态，那么如果要求把后端把el-tree的数据结构，通过一个展开的list返回给你，使用el-checkbox组件渲染每一个节点，同时要求选中某一个节点，同时可以选中其父节点和子节点；取消也是一样。
思路：
首先el-checkbox是没有el-tree的check-strictly来严格遵循父子相关联的属性，那么想实现就需要
1. 向下递归查询点击节点的子节点。
2. 向上递归查询点击节点的父节点。
3. 通过indeterminate 属性用以表示 checkbox 的不确定状态，用来表示父节点的选中效果
实现效果：
使用el-checkbox实现el-tree父子关系选中效果
代码实现：
html部分：文章来源：https://www.toymoban.com/news/detail-854531.html
<template>
<div>
<el-checkbox
v-for="(item, key) in labelList"
:label="item.labelName"
:key="key"
v-model="item.checked"
:indeterminate="item.isIndeterminate"
@change="changeCheck(item)"
></el-checkbox>
</div>
</template>JavaScript部分：文章来源地址https://www.toymoban.com/news/detail-854531.html
<script>
export default {
data() {
return {
listQuery: {
labelValue: [],
},
labelList: [
// {
// labelName: '根目录',
// id: 1,
// parentId: -1,
// checked: false
// },
{
labelName: '一级 1',
id: 2,
parentId: 1,
checked: false,
},
{
labelName: '一级 2',
id: 3,
parentId: 1,
checked: false,
},
{
labelName: '一级 3',
id: 4,
parentId: 1,
checked: false,
},
{
labelName: '二级 1-1',
id: 5,
parentId: 2,
checked: false,
},
{
labelName: '三级 1-1-1',
id: 9,
parentId: 5,
checked: false,
},
{
labelName: '三级 1-1-2',
id: 10,
parentId: 5,
checked: false,
},
{
labelName: '二级 2-1',
id: 6,
parentId: 3,
checked: false,
},
{
labelName: '二级 2-2',
id: 7,
parentId: 3,
checked: false,
},
{
labelName: '二级 3-1',
id: 8,
parentId: 4,
checked: false,
},
{
labelName: '二级 3-2',
id: 11,
parentId: 4,
checked: false,
},
{
labelName: '三级 3-2-1',
id: 12,
parentId: 11,
checked: false,
},
{
labelName: '三级 3-2-2',
id: 13,
parentId: 11,
checked: false,
},
{
labelName: '三级 3-2-3',
id: 14,
parentId: 11,
checked: false,
}
]
}
},
methods: {
changeCheck(row) {
// 向下选中子级
this.downRecursiveChildren(row)
// 每次添加前先清空选中的标签的name数组
this.listQuery.labelValue = []
this.labelList.map((i) => {
if (i.checked) {
this.listQuery.labelValue.push(i.labelName)
}
})
console.log('a', this.listQuery.labelValue)
},
downRecursiveChildren(row, isGrandChildren = false) {
if (row.isIndeterminate) {
row.isIndeterminate = false
}
this.labelList.forEach((item) => {
// 判断点击的标签下，是否有子标签，如果有状态设置为true
if (row.id === item.parentId) {
item.checked = row.checked
// 判断点击的标签下的子标签是否还有子级，如果有，递归调用，把所有子级全部选中
if (this.labelList.some((v) => item.id === v.parentId)) {
this.downRecursiveChildren(item, true)
}
}
})
// 如果没有了，return
if (isGrandChildren) return
this.upRecursiveParent(row)
},
// 向上寻找父级，添加状态
upRecursiveParent(row) {
// 获取点击标签的父标签
let parentNode = this.labelList.find((v) => v.id == row.parentId)
// 定义点击标签的兄弟数组
let subing_list = []
this.labelList.forEach((item) => {
// 判断点击标签是否有相同的父级，如果有把所有的兄弟标签获取到
if (item.parentId === row.parentId) {
subing_list.push(item)
console.log('2', subing_list)
}
})
if (parentNode) {
// 所有的兄弟节点全部选中且没有不确定状态， 需要选中父标签节点
if (
subing_list.every((item) => item.checked && !item.isIndeterminate)
) {
// 全选中且没有不确定状态
parentNode.checked = true
parentNode.isIndeterminate = false
console.log('3')
} else if (
// 所有的兄弟节点全部选中且没有不确定状态， 需要选中父标签节点
subing_list.every((item) => !item.checked && !item.isIndeterminate)
) {
// 全不选中并且没有不确定状态，不需要选中父标签节点
parentNode.checked = false
parentNode.isIndeterminate = false
console.log('4')
} else {
// 有部分选中，父节点需要设置为半选状态
parentNode.checked = false
parentNode.isIndeterminate = true
console.log('5', parentNode)
}
if (parentNode.parentId !== 1) {
this.upRecursiveParent(parentNode)
}
}
}
},
}
</script>到了这里，关于开发需求15-使用el-checkbox组件实现el-tree组件的父子关联关系（非全选/全不选）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
