技術標籤：前端

tree結構方法可以參考elementUI官網<el-tree></el-tree>方法。我這邊已經封裝了tree的方法，這塊部分略！這裡目的是選中父類如何遍歷子類的方法。

封裝的My-tree.vue

略！！！

<el-tree>
   可參考這個元件，自己封裝
        
</el-tree>

引用：封裝的VUE的tree

<My-tree
            ref="Mytree"
            slot="sidebar"
            :data="tree.data"
            height="5rem"
            @check-change="checkChange"
            style="margin-top: 0.1rem;">
</My-tree>
 

>然後就實現checkChange選中checkedBox的方法，先上程式碼後講解（注意看備註）。

  checkChange(data, node){ //選中的功能方法，你的tree中實現了嗎？


            console.log("是否選中", data,"選中的群組id",node);

             //實現遍歷選中功能，選中父類，遍歷父類下的子孫類，比如選中廣東，它下面的廣州、深圳（寶安區、南山區）。。。。
            this.setChildrenChecked(node, node.checked);
            //遍歷父類功能
            if(node.checked){//如果選中
               this.setParentChecked(node);//這個是子類選中，父類不被選中（看個人需求，不需要則禁用）
            }else{
               this.setParentUnCheck(node);/取消子類時，父類跟著被取消
            }
            

        },
 

上面呼叫遞迴方法

setChildrenChecked(node, isChecked) { // 遞迴子節點
            node.checked = isChecked;
            if (!node.children || node.children.length === 0) {
                return;
            }
            for (let child of node.children) {
               this.setChildrenChecked(child, isChecked);              
            }
        },
        setParentChecked(node) {//選中狀態
            if (!node.parent) {
                return;
            }

           /* 這個是選中孫類（南山區），父類被選中（深圳），第一級不被選中（廣東）
            let allSameLevel = true; // 判斷所有同級是否和當前狀態一樣
            for (let sameLevel of node.parent.children) {
                if (!sameLevel.checked) {
                    allSameLevel = false;
                    break;
                }
            }
            if (!allSameLevel) { // 有不同的就不繼續執行
                return;
            }
             */

            node.parent.checked = true;
            this.setParentChecked(node.parent);
        },
        setParentUnCheck(node){//未選中
            if (!node.parent) {
                return;
            }

            /* 孫節點取消（南山區），子節點跟著取消（深圳），父節點沒有取消（廣東）
            let allSameLevel = false;
            for (let sameLevel of node.parent.children) {
                if (sameLevel.checked) {
                    allSameLevel = false;
                    break;
                }
            }
            if (!allSameLevel) { // 有不同的就不繼續執行
                return;
            }
            */

            node.parent.checked = false;
            this.setParentUnCheck(node.parent);
        },
 

以上程式碼已經實現，驗證可以。

tree結構大概如下（本地即廣東省）：