el-select中嵌套el-tree

实现效果：

代码：

<template>
    <div>
        <el-select v-model="value"
                   multiple
                   @change="selectChange">
            <el-option style="height: auto"
                       :value="selectedValue">
                <el-tree :data="treeData"
                         :props="defaultProps"
                         show-checkbox
                         node-key="id"
                         ref="tree"
                         @check-change="handleCheckChange">
                </el-tree>
            </el-option>
        </el-select>

    </div>
</template>
<script>
export default {
    data () {
        return {
            value: [],
            selectedValue: [],
            defaultProps: {
                label: 'label',
                children: 'children'
            },
            treeData: [{
                id: 1,
                label: '一级1',
                children: [{
                    id: 4,
                    label: '二级1-1',
                    children: [{
                        id: 10,
                        label: '三级1-1'
                    }]
                }, {
                    id: 6,
                    label: '二级1-2',
                }, {
                    id: 7,
                    label: '二级1-3',
                }, {
                    id: 8,
                    label: '二级1-4',
                }, {
                    id: 9,
                    label: '二级1-5',
                }]
            }, {
                id: 2,
                label: '一级2',
                children: [{
                    id: 5,
                    label: '二级2-1'
                }]
            }, {
                id: 3,
                label: '一级3'
            }]
        }
    },
    methods: {
        handleCheckChange (data, checked, indeterminate) {
            let res = this.$refs.tree.getCheckedNodes(true, true);
            let arrLabel = [];
            let arr = [];
            res.forEach(item => {
                arrLabel.push(item.label);
                arr.push(item)
            })
            this.value = arrLabel;
            this.selectedValue = arr;
            console.log(res)
            console.log(data, checked, indeterminate)
        },
        hanleNodeClick (data) {
            console.log(data)
        },
        loadNode (node, resolve) {

        },
        selectChange (event) {
            // 这个event数组只有label
            // 这里主要处理框内选中项的取消选中
            let arrNew = [];
            this.selectedValue.forEach(item => {
                event.forEach(eventItem => {
                    if (eventItem == item.label) {
                        arrNew.push(item)
                    }
                })
            })
            this.$refs.tree.setCheckedNodes(arrNew)
        }
    }

}
</script>
<style scoped lang="scss">
</style>