需求描述:
大家都知道el-tree可以很明显的通过选中来体现上下节点的父子选中状态,那么如果要求把后端把el-tree的数据结构,通过一个展开的list返回给你,使用el-checkbox组件渲染每一个节点,同时要求选中某一个节点,同时可以选中其父节点和子节点;取消也是一样。
思路:
首先el-checkbox是没有el-tree的check-strictly来严格遵循父子相关联的属性,那么想实现就需要
1. 向下递归查询点击节点的子节点。
2. 向上递归查询点击节点的父节点。
3. 通过indeterminate
属性用以表示 checkbox 的不确定状态,用来表示父节点的选中效果
实现效果:
使用el-checkbox实现el-tree父子关系选中效果
代码实现:
html部分:
<template><div><el-checkboxv-for="(item, key) in labelList":label="item.labelName":key="key"v-model="item.checked"