vue2 select 下拉框联动tree 树形控件

<template>
    <div>
        <!-- 多选 -->
        <el-select size="small" class="item" v-model="form.accept_all" multiple allow-create default-first-option
            placeholder="请选择" @remove-tag="remove" :size="size">
            <el-option :value="tree_data" style="height: auto;padding:0">
                <el-tree @check="handleCheckChange" :default-checked-keys="defaultDataKey" :data="treeData"
                    :props="defaultProps" show-checkbox default-expand-all node-key="empNo" ref="tree" highlight-current>
                </el-tree>
            </el-option>
        </el-select>



    </div>
</template>

<script>
export default {
    props: ['form', 'size'],
    data() {

        return {
            info: {},
            treeData: [
                {
                    "address": "测试1",
                    "children": [
                        {
                            "empNo": "112",
                            "name": "da",
                            "serial": 7
                        },
                        {
                            "empNo": "22",
                            "name": "b",
                            "serial": 13
                        },
                        {
                            "empNo": "33",
                            "name": "c",
                            "serial": 63
                        },
                        {
                            "empNo": "44",
                            "name": "d",
                            "serial": 76
                        },
                        {
                            "empNo": "55",
                            "name": "e",
                            "serial": 80
                        }
                    ],
                    "deptType": 4,
                    "description": "大品牌，有门面！",
                    "institutionCode": "KUYU0",
                    "name": "销售一部",
                    "phoneNo": "12",
                    "serial": 1,
                    "sortV": 0,
                    "type": 1
                },
                {
                    "address": "测试2",
                    "children": [
                        {
                            "empNo": "66",
                            "name": "e",
                            "serial": 6
                        },
                        {
                            "empNo": "77",
                            "name": "f",
                            "serial": 31
                        },
                        {
                            "empNo": "88",
                            "name": "g",
                            "serial": 70
                        },
                        {
                            "empNo": "99",
                            "name": "h",
                            "serial": 78
                        },
                        {
                            "empNo": "10",
                            "name": "j",
                            "serial": 105
                        },
                        {
                            "empNo": "11",
                            "name": "k",
                            "serial": 108
                        }
                    ],
                    "deptType": 4,
                    "description": "我超爱这家店的！！！",
                    "institutionCode": "KUYU1",
                    "name": "销售二部",
                    "phoneNo": "123",
                    "serial": 2,
                    "sortV": 0,
                    "type": 2
                },


            ],
            defaultDataKey: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            defaultProps3: {
                children: 'children',
                label: 'name',
                disabled: function (data, node) {
                    if (data.children && data.children.length >= 0) {
                        return true
                    } else {
                        return false
                    }
                }
            },
            tree_data: [],
            arr: [],
            form: {
                accept_all: ''
            }
        }
    },
    mounted() {
    },
    methods: {
        async query() {
        },
        remove(e) {
            this.arr = this.$refs.tree.getCheckedNodes(true)
            for (let i = 0; i < this.arr.length; i++) {
                if (this.arr[i].name == e) {
                    this.defaultDataKey.splice(this.arr[i], 1)
                    this.$refs.tree.setChecked(this.arr[i].empNo, false, false);
                }
            }
            this.$emit('remove', this.defaultDataKey)

        },

        handleCheckChange(e) {
            this.arr = this.$refs.tree.getCheckedNodes(true)
            let getarr = []
            this.arr.forEach((item) => {
                if (!item.children) {
                    getarr.push(item)
                    return
                }
            })
            let label = getarr.map((item) => {
                return item.name
            })
            let ids = getarr.map((item) => {
                return item.empNo
            })
            this.defaultDataKey = ids
            this.form.accept_all = label
            this.$emit('sendKeys_all', this.defaultDataKey)
        },





    }
}
</script>

<style lang="less" scoped>
.el-select {
    width: 100%;
}

// /deep/ .el-tag__close {
//     // display: none;
// }
</style>

效果图：

下拉框删除或者树形控件删除组件的数据都是同步的