在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ Vue組件遞歸,開發(fā)樹狀菜單的問題?

Vue組件遞歸,開發(fā)樹狀菜單的問題?

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

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

        {
            id: "1_1",
            name: '一級節(jié)點-1',
            open: true,
            checked: false,
            parentId: null,
            children: [
                {
                    id: "2_1",
                    name: '二級節(jié)點-1',
                    open: true,
                    checked: false,
                    parentId: "1_1",
                    children: [
                        {
                            id: "3_1",
                            name: '三級節(jié)點-1',
                            checked: false,
                            parentId: "2_1"
                        },
                        {
                            id: "3_2",
                            name: '三級節(jié)點-2',
                            open: true,
                            checked: false,
                            parentId: "2_1",
                            
                        }
                        
                    ]
                },
                {
                    id: "2_2",
                    name: '二級節(jié)點-2',
                    open: true,
                    checked: false,
                    parentId: "1_1",
                    children: [
                        {
                            id: "3_4",
                            name: '三級節(jié)點-4',
                            checked: false,
                            parentId: "2_2"
                        }
                    ]
                }
            ]
        },
        {
            id: "1_2",
            name: '一級節(jié)點-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>
        <!--組件遞歸(下一級)-->
        <treemenu :treelist="item.children" :parent="item" 
            v-show="treelist[index].open">
        </treemenu>
    </li>
</ul>

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

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

}

</script>

輸出結果:

clipboard.png

目前效果:

clipboard.png

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