最近在写代码的时候遇到一个需求，就是需要试用下拉菜单完成二级菜单选择、甚至有三级的菜单选择：
  UI提出此功能需要有以下三个要点：

• 在不同的情况下要实现单选或者多选
• 选择的内容要回调在输入框内
• 既可以下拉选择又可以搜索选择
    基于此，我开始设计了这个组件。话不多说 上效果图。
• 多选效果图
  
• 单选效果图
  
   &emsp话不多说上代码：

父组件

<template>
    <div class="demo">
        <elTree :list="options" :defaultProps="defaultProps" @getdetail="getdetail" :selectType="selectType"> </elTree>
    </div>
</template>

<script>
import elTree from './elTree.vue'
export default {
    components: {
        elTree,
    },
    data() {
        return {
            options: [
                {
                    id: 1,
                    label: '一级 2',
                    value: '一级2',
                    disabled: false,
                    children: [
                        {
                            id: 3,
                            label: '二级 2-1',
                            value: '二级2-1',
                            disabled: false,
                            children: [
                                {
                                    id: 4,
                                    label: '三级 3-1-1',
                                    value: '三级3-1-1',
                                    disabled: false,
                                },
                                {
                                    id: 5,
                                    label: '三级 3-1-2',
                                    value: '三级3-1-2',
                                    disabled: false,
                                },
                            ],
                        },
                        {
                            id: 2,
                            label: '二级 2-2',
                            value: '二级2-2',
                            disabled: true,
                            children: [
                                {
                                    id: 6,
                                    label: '三级 3-2-1',
                                    value: '三级3-2-1',
                                    disabled: false,
                                },
                                {
                                    id: 7,
                                    label: '三级 3-2-2',
                                    value: '三级3-2-2',
                                    disabled: false,
                                },
                            ],
                        },
                    ],
                },
            ],
            // 数据格式化====必填
            defaultProps: {
                children: 'children',
                label: 'label',
                value: 'value',
            },
            //单选或者复选
            selectType: 'single',//multiple为多选
        }
    },
    methods: {
        //获取勾选数据
        getdetail(val) {
            console.log(val, '222222222')
        },
    },

}
</script>

子组件代码

<template>
    <div class="app-container caseManagementIndex scrollcontainer scrollcontainer_auto" ref="caseManagementIndex" v-if="list.length > 0">
        <el-select v-model="value" filterable :multiple="multiple" placeholder="请选择" :popper-append-to-body="false" :filter-method="assetsTypeFilter">
            <el-option :value="selectTree" class="setstyle" disabled>
                <el-tree
                    :data="list"
                    :props="defaultProps"
                    ref="tree"
                    node-key="id"
                    show-checkbox
                    check-strictly
                    :expand-on-click-node="false"
                    check-on-click-node
                    @check-change="checkChangeClick"
                    :filter-node-method="filterNode"
                ></el-tree>
            </el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    name: 'caseManagementIndex',
    // import引入的组件需要注入到对象中才能使用PopupTreeInput
    components: {},
    props: {
        list: {
            type: Array,
            default: () => [],
        },
        defaultProps: {
            type: Object,
            default: {
                //children: 'children',
                //label: 'label',
            },
        },
        selectType: {
            type: String,
            default: 'multiple',
        },
    },
    data() {
        // 这里存放数据
        return {
            value: [],
            selectTree: [],
            multiple: true,
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        console.log('flatten(fromData)', this.flatten(this.list))
        this.selectTree = this.flatten(this.list)
    },
    // 方法集合
    methods: {
        flatten(arr) {
            return [].concat(
                ...arr.map((item) => {
                    if (item.children) {
                        let arr = [].concat(item, ...this.flatten(item.children))
                        delete item.children
                        return arr
                    }
                    return [].concat(item)
                }),
            )
        },
        assetsTypeFilter(val) {
            // 下拉框调用tree树筛选
            //console.log(this, val)
            this.$refs.tree.filter(val)
        },
        checkChangeClick(data, self, child) {
            console.log(data, self, child, this.selectType)
            if (this.selectType == 'multiple') {
                let datalist = this.$refs.tree.getCheckedNodes()
                //console.log('datalist', datalist)
                this.value = []
                datalist.forEach((item) => {
                    this.value.push(item.label)
                })
                let values = datalist.map((item) => {
                    return item.value
                })
                this.$emit('getdetail', datalist)
            } else {
                if (self) {
                    this.$refs.tree.setCheckedNodes([data])
                    this.multiple = false
                    this.value = data.label
                    this.$emit('getdetail', data)
                }
            }
        },
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
    },
}
</script>
<style lang="scss">
.setstyle {
    min-height: 200px;
    padding: 0 !important;
    margin: 0;
    overflow: auto;
    cursor: default !important;
}
</style>
<style lang="scss" scoped></style>

  以上el-select和el-tree实现单选/复选/搜索组件封装就好啦。

实现思路：

1、可搜索

利用属性：filterable +方法 filter-method实现

2、复选和单选控制

利用**:multiple="multiple"和selectType进行判断，不同的情况下，勾选的结果是单选还是多选，走不通的业务逻辑

  如果你觉得本文写的不错的话，记得收藏、关注和点赞哟，