fj-dc-ui/.svn/pristine/2d/2d6e75b617b22de5bfa52b0931d207b3f36c4792.svn-base

<template>
    <div>
        <div class="menu_tree">
            <p @click="closeTree"><i class="el-icon-arrow-down"></i></p>
            <el-tree :data="treeInfos" :props="defaultProps" node-key="id" @node-click="handleNodeClick"></el-tree>
        </div>
        <div v-if="isChecked == 'treeCheck'" >
            <el-tree 
            ref="trees" 
            :data="menuInfos" 
            :props="defaultProps" 
            node-key="id" 
            @node-click="handleNodeClick"
            show-checkbox
            @check-change="handleCheckChange"></el-tree>
        </div>
    </div>
</template>
<script>
    import { getTrees } from "@util/gw_formatTree.js";
    export default {
        props: ['treeInfos','parentId','label','isChecked'],   //接收组件传过来的树形数据和根id
        name: 'tree',
        data () {
            return {
                defaultProps: {
                    children: 'children',
                    label: this.label
                },
                treeInfo: this.treeInfos
            }
        },
        mounted:function(){
            this.treeInfo = getTrees(this.treeInfo,this.parentId)
        },
        methods:{
            //与父组件通信  关闭组件
            closeTree(){
                this.$emit('closeTree',0)
            },
            handleNodeClick(data) {
                console.log(data)
                this.$emit('sendMenuInfo',data)
                if(!data.children.length){
                    this.$emit('closeTree',0)
                }
            },
            handleCheckChange(data, checked, indeterminate) {
                this.menuIds = this.$refs.trees.getCheckedKeys()
                this.$emit('sendMenuInfo',this.menuIds)
                console.log(data, checked, indeterminate);
                console.log(this.menuIds)
            }
        }
    }
</script>
<style>
    .menu_tree{
        position: absolute;
        top: 30px;
        z-index: 20;
        width: 100%;
        border: solid 1px #eee;
        background-color: #fff;
    }
    .menu_tree p{
        font-weight: normal;
        color: #999;
        text-align: center;
        position: absolute;
        right: 10px;
        top: -28px;
        z-index: 20;
        font-size: 16px;
    }
</style>