el-tree 踩过最深的坑，没有之一。设置与上级严格关联、下级不严格关联，CV即用_el-tree defaultprops

先看需求

重点：当你点击勾选复选框时候，若点击父节点，其上下子节点全部统一跟随父节点变化；若点击子节点，子节点部分勾选时父节点处于全选状态，子节点全部勾选时父节点选中，子节点全部不勾选时父节点还是选中状态。

效果

图是扒下来的，意思一样，实现效果一样（不会制作gif图 o(╥﹏╥)o）

实现逻辑

这个功能在官方文档上是没有直接呈现的，需要我们自己去对代码进行理解然后编写。
首先要用到官方文档提供的方法与事件：

• 第一步 我们需要设置 check-strictly 属性，目的是为了打破父子相互关联的做法，设置为true即可。设置node-key唯一值，一般都是使用节点id。
• 第二步 监听树结构的check事件与setChecked方法。 重点：树结构的 data 里每级需要有上级的父节点id字段。后端接口提供。

html代码

<el-tree ref="menuTree" 
	:data="menuIdList" 
	show-checkbox 
	node-key="id"  // 这里我用的就是树结构每一级的唯一值id
	:props="defaultProps"  // props配置项，官方文档有详细解释
	check-strictly  // 打破父子相互关联
	@check="hanleCheck"> // 当复选框被点击的时候触发的事件
</el-tree>
1
2
3
4
5
6
7
8

css代码 props配置

   defaultProps: {
        children: 'menuList',
        label: 'menuName',
   }
1
2
3
4

获取到后端接口数据结构，多级树结构数据

重点：通过接口数据中 parentId 字段来判断当前点击的节点是否有上级节点

js 代码

        hanleCheck (data, node) {
            const _this = this
            // 获取当前节点是否被选中
            const isChecked = this.$refs.menuTree.getNode(data).checked
            // 如果当前节点被选中，则遍历上级节点和下级子节点并选中，如果当前节点取消选中，则遍历下级节点并取消选中
            if (isChecked) {
                // 判断是否有上级节点，如果有那么遍历设置上级节点选中
                data.parentId && setParentChecked(data.parentId)
                // 判断该节点是否有下级节点，如果有那么遍历设置下级节点为选中
                data.menuList && setChildreChecked(data.menuList, true)
            } else {
                // 如果节点取消选中，则取消该节点下的子节点选中
                data.menuList && setChildreChecked(data.menuList, false)
            }
            function setParentChecked (parentId) {
                // 获取该id的父级node
                const parentNode = _this.$refs.menuTree.getNode(parentId)
                // 如果该id的父级node存在父级id则继续遍历
                parentNode && parentNode.data && parentNode.data.parentId && setParentChecked(parentNode.data.parentId)
                //  设置该id的节点为选中状态
                _this.$refs.menuTree.setChecked(parentId, true)
            }
            function setChildreChecked (node, isChecked) {
                node.forEach(item => {
                    item.menuList && setChildreChecked(item.menuList, isChecked)
                    _this.$refs.menuTree.setChecked(item.id, isChecked)
                })
            }
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

结束。