el-select嵌套el-tree 封装成组件

<template>
    <el-select
        v-model="selectList"
        placeholder="请选择"
        multiple
        @change="selectChange"
    >
        <el-option :value="selectValue" style="height: auto" disabled>
            <el-input
                size="mini"
                placeholder="搜索部门"
                v-model="filterText"
            >
            </el-input>
            <el-tree
                :data="treeList"
                show-checkbox
                node-key="oid"
                ref="tree888"
                highlight-current
                check-strictly
                :props="defaultProps"
                :filter-node-method="filterNode"
                @check-change="handleCheckChange"
            >
            </el-tree>
        </el-option>
    </el-select>
</template>
<script>
export default {
    props: {
        treeList: {
            type: Array,
            default: () => []
        },
    },
    data() {
        return {
            defaultProps: {
                label: 'deptName',
                children: 'children'
            },
            selectList: [],
            selectValue: [],
            filterText: ""
        }
    },
    mounted () {
        this.$on('change', function() {
            this.handleCheckChange()
        })
    },
    watch: {
        filterText(val) {
            this.$refs.tree888.filter(val);
        }
    },
    methods: {
        // select框值改变时候触发的事件
        selectChange(e) {
            var arrNew = []
            var dataLength = this.selectValue.length
            var eleng = e.length
            for (let i = 0; i < dataLength; i++) {
                for (let j = 0; j < eleng; j++) {
                    if (e[j] === this.selectValue[i].deptName) {
                        arrNew.push(this.selectValue[i])
                    }
                }
            }
            this.$refs.tree888.setCheckedNodes(arrNew) //设置勾选的值
        },
        // tree888选择改变时候触发的事件
        handleCheckChange() {
            let res = this.$refs.tree888.getCheckedNodes()
            let arrLabel = []
            let arr = []
            res.forEach((item) => {
                arrLabel.push(item.deptName)
                arr.push(item)
            });
            this.selectValue = arr
            this.selectList = arrLabel
        },
        // tree888搜索
        filterNode(value, data) {
            if (!value) return true
            return data.deptName.indexOf(value) !== -1
        }
    }
}
</script>