el-select + el-tree的结合使用

实现el-select + el-tree结合使用，具体见图：

直接在el-select下拉框中放置el-tree，但使用的样式穿透下拉框的高度一直修改不了，查找了很多博客，在这篇文章中找到了方法，可以有效设置下拉框的高度，具体代码如下

<el-form-item label="上级部门" prop="parentId">
                                <el-select v-model="form.selectTree" placeholder="选择部门" popper-class="eloption" @clear="clearall" ref="mySelect clearable>

                                    <el-row class="blRow">
                                        <el-col>
                                            <el-option :value="form.selectTree" disabled>
                                                <el-tree
                                                    :data="deptTableData"
                                                    :props="defaultProps"
                                                    ref="tree"
                                                    show-checkbox
                                                    check-strictly
                                                    :expand-on-click-node="false"
                                                    node-key="id"
                                                    check-on-click-node
                                                    @check-change="handleNodeClick"
                                                ></el-tree>
                                            </el-option>
                                        </el-col>
                                    </el-row>
                                </el-select>
</el-form-item>

数据：

  deptTableData: [],

defaultProps: {
    children: 'children',
    label: 'deptName'
},
form:{

selectTree: ''

}

事件:

handleNodeClick(data, self, child) {

            let datalist = this.$refs.tree.getCheckedNodes()

            let dataLennth = datalist.length

            console.log('form:', this.form)

            if (dataLennth == 1 && !this.alreadySet) {

                console.log('11111111111')

                this.form.deptId = data.id

                this.form.selectTree = data.deptName

                this.$refs.mySelect.handleClose()

            }

            if (dataLennth > 1) {

                this.alreadySet = true

                let dataArray = []

                dataArray.push(data)

                this.form.deptId = data.id

                this.form.selectTree = data.deptName

                console.log('dataArray:', dataArray)

                this.$nextTick(() => {

                    this.$refs.mySelect.handleClose()

                    this.$refs.tree.setCheckedNodes(dataArray)

                })

            }

        },
        clearall() {
            this.form.selectTree = ''
            this.$nextTick(() => {
                this.$refs.tree.setCheckedNodes([])
            })

        },

如果页面有多个tree,获取树节点和关闭下拉框用如下代码：

this.$refs.tree[0].getCheckedNodes()

 this.$refs.mySelect[0].handleClose()

样式：

.blRow {
    height: 250px !important;
    overflow-y: auto;
    .el-select-dropdown__item {
        height: 240px !important;
    }
}