fj-dc-ui/.svn/pristine/d4/d47e52a37669856a5aa91d7b828c1376bf461b2c.svn-base

<template>
    <div>
        <div class="menu_tree" v-if="showtwo && isChecked == 'tree'">
            <p @click="treeClose"><i class="el-icon-arrow-down"></i></p>
            <el-tree ref="trees" :data="menuInfos" :props="defaultProps" node-key="id" @node-click="handleNodeClick"></el-tree>
        </div>
        <div class="tree_menu" v-if="!showtwo && isChecked == 'tree'">
            <p @click="closeTree"><i class="el-icon-arrow-down"></i></p>
            <el-tree ref="trees" :expand-on-click-node="false" :data="treeInfos" :props="defaultProps" node-key="id" @node-click="handleNodeClick"></el-tree>
        </div>
        <div v-if="isChecked == 'treeCheck'" >
            <el-tree
            ref="trees"
            :data="treeInfos"
            :props="defaultProps"
            node-key="id"
            @node-click="handleNodeClick"
            show-checkbox
            check-strictly="true"
            @check-change="handleCheckChange"></el-tree>
        </div>
    </div>
</template>
<script>
    import request from '../utils/gw_ajax_request.js'
    export default {
        props: ['menuInfo','isChecked','id','treeInfos','defaultProps','curIds'],
        name: 'tree',
        data () {
            return {
                menuInfos: [],
                checkedIds: [],
                showtwo: 0
            }
        },
        mounted(){
            if(this.curIds){
                this.$refs.trees.setCheckedKeys(this.curIds)
            }
        },
        methods:{
            closeTree(){
                this.$emit('closeTree',0)
            },
            treeClose(){
                this.$emit('closeTree',0)
            },
            handleNodeClick(data) {
                this.$emit('sendMenuInfo',data)
            },
            handleCheckChange(data, checked, indeterminate) {
                // if(checked){
                    // this.checkedIds.push(data.id)
                    // console.log(this.checkedIds)
                    // this.checkedIds = Array.from(new Set(this.checkedIds))
                    // console.log(this.checkedIds)
                // }
                this.checkedIds = this.$refs.trees.getCheckedKeys()
                this.$emit('sendCheckedInfo',this.checkedIds)
                console.log(data, checked, indeterminate);
            }
        },
        watch:{
            curIds(val){
                console.log(val)
                val ? this.$refs.trees.setCheckedKeys(val) : []
            }
        }
    }
</script>
<style>
    .tree_menu{
        position: absolute;
        top: 30px;
        z-index: 20;
        width: 100%;
        border: solid 1px #eee;
        background-color: #fff;
    }
    .tree_menu p{
        font-weight: normal;
        color: #999;
        text-align: center;
        position: absolute;
        right: 10px;
        top: -28px;
        z-index: 20;
        font-size: 16px;
    }
    .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: 20px;
        top: -28px;
        z-index: 20;
        font-size: 16px;
    }
</style>