先看需求

重點：當你點擊勾選復選框時候，若點擊父節點，其上下子節點全部統一跟隨父節點變化；若點擊子節點，子節點部分勾選時父節點處于全選狀態，子節點全部勾選時父節點選中，子節點全部不勾選時父節點還是選中狀態。

效果

圖是扒下來的，意思一樣，實現效果一樣（不會制作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>

css代碼 props配置

   defaultProps: {
        children: 'menuList',
        label: 'menuName',
   }

獲取到后端接口數據結構，多級樹結構數據

重點：通過接口數據中 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)
                })
            }
        },

結束。