<template>
    <el-tree
        ref="tree"
        show-checkbox
        :data="data"
        node-key="value"
        @check-change="checkChange"
    >
    </el-tree>
</template>

<script>
export default {
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        data: Array,
        value: Array
    },
    watch: {
        value: {
            handler (newVal) {
                this.$refs.tree.setCheckedKeys(newVal)
            },
            deep: true
        }
    },
    methods: {
        checkChange () {
            const nodes = this.$refs.tree.getCheckedNodes()
            console.log(this.$refs.tree.getCheckedKeys())
            this.$emit('change', nodes.map(item => item.value))
        }
    }
}
</script>
