鍍金池/ 問(wèn)答/HTML/ Vue組件遞歸,開(kāi)發(fā)樹(shù)狀菜單的問(wèn)題?

Vue組件遞歸,開(kāi)發(fā)樹(shù)狀菜單的問(wèn)題?

想做一個(gè)多級(jí)樹(shù)狀菜單,別的功能都實(shí)現(xiàn)差不多了。但子級(jí)全選父級(jí)(更上級(jí))選中怎么實(shí)現(xiàn)?
還有為什么mounted里面會(huì)輸出很多undifined?

數(shù)據(jù)(有省略):
treeData: [

        {
            id: "1_1",
            name: '一級(jí)節(jié)點(diǎn)-1',
            open: true,
            checked: false,
            parentId: null,
            children: [
                {
                    id: "2_1",
                    name: '二級(jí)節(jié)點(diǎn)-1',
                    open: true,
                    checked: false,
                    parentId: "1_1",
                    children: [
                        {
                            id: "3_1",
                            name: '三級(jí)節(jié)點(diǎn)-1',
                            checked: false,
                            parentId: "2_1"
                        },
                        {
                            id: "3_2",
                            name: '三級(jí)節(jié)點(diǎn)-2',
                            open: true,
                            checked: false,
                            parentId: "2_1",
                            
                        }
                        
                    ]
                },
                {
                    id: "2_2",
                    name: '二級(jí)節(jié)點(diǎn)-2',
                    open: true,
                    checked: false,
                    parentId: "1_1",
                    children: [
                        {
                            id: "3_4",
                            name: '三級(jí)節(jié)點(diǎn)-4',
                            checked: false,
                            parentId: "2_2"
                        }
                    ]
                }
            ]
        },
        {
            id: "1_2",
            name: '一級(jí)節(jié)點(diǎn)-2',
            open: true,
            checked: false,
            parentId: null
        }
    ]
}

},

template:

<!--用藥-診斷-->
<ul class="tree_menu">
    <li v-for="(item, index) in treelist" :key="index">
        <div class="item" v-if="item">
            <span class="toggler" v-if="item.children" @click="collapse(index)">{{toggler(index)}}</span>
            <label :id="item.id" class="clearfix" v-if="item">
                <input type="checkbox" :checked="treelist[index].checked" @click="ifChecked(index)">
                <i></i>
                <p>{{item.name}}</p>
            </label>
        </div>
        <!--組件遞歸(下一級(jí))-->
        <treemenu :treelist="item.children" :parent="item" 
            v-show="treelist[index].open">
        </treemenu>
    </li>
</ul>

<script>
export default {
    name:'treemenu',
    props:["treelist","parent"], //接收父級(jí)的值
    data (){
        return{
            parentList:[]
            
        }
    },
    methods:{
        //設(shè)置折疊按鈕+/-
        toggler(index){
            return !this.treelist[index].open?"+":"-";
        },
        collapse(index){
            this.treelist[index].open = !this.treelist[index].open;
        },
        /**父級(jí)->子級(jí)方法**/
        checkAll(obj){
            //如果有下一級(jí)
            if(obj.children){
                //遍歷數(shù)組
                $.each(obj.children, (i,v)=>{
                    if(obj.checked){
                        v.checked = true;
                    }else{
                        v.checked = false;
                    }
                    //遞歸調(diào)用
                    this.checkAll(v);
                });
                
            }
        },
        /**子級(jí)->父級(jí)方法**/
        checkEach(obj){
            

        },
        //判斷是否勾選(點(diǎn)擊事件)
        ifChecked(index){
            this.treelist[index].checked = !this.treelist[index].checked; //改變自己的勾選狀態(tài)
            this.checkAll(this.treelist[index]); //父級(jí)->子級(jí)方法
            this.checkEach(this.treelist[index]); //子級(jí)->父級(jí)方法
        }
        
    },
    mounted(){
        console.log(this.treelist);
    }

}

</script>

輸出結(jié)果:

clipboard.png

目前效果:

clipboard.png

回答
編輯回答
離觴
2018年3月20日 05:25