我们先来看效果

点击获取焦点时

image.png

选中项目后

image.png
鼠标悬浮时
image.png

获取焦点 输入内容后 支持查询功能，并提示已选功能

image.png
点击清空按钮后回到最开始的获取焦点
image.png
自动支持全选 和反选全选
image.png
原生的ANTD的 兼容原本的单选功能，
image.png

调用方式 因为我这里是循环输出，所有你只需要对应自己的变量即可

<div class="title-right">
      <slot name="right">
             <template v-for="(item, i) in btns">
                  <span :key="i" class="input-select">
                        <Ytselect v-model="form[item.keyName || 'key'+i]" @change="change(item)" :options="item.options" :tipSize="5" class="title-right_select" :mode="item.mode"/>
                  </span>
           </template>
      </slot>
 </div>

以下是设计逻辑， 大量应用ES6 语法 。

我的写组件的思路 尽量只关心输入输出的数据，内部数据预定义，并且保持多种状态。可以扩展，插槽等，尽量让开发组员只做配属数据 不做逻辑本功能的逻辑处理。

<template>
    <span :class="['kyol-Ytselect',keyName]" :style="{width}">
        <a-select :mode="mode" v-model="myValue" :open="!mode ? undefined : open" class="select" v-bind="config" v-on="events" @change="change(myValue)" show-search>
            <a-select-option value="all" v-if="mode || !isSearch">
                {{selectAllText}}
            </a-select-option>
            <template v-for="(item, i) in selectOptions">
                <a-select-option :key="i" :value="item.value" :disabled="item.disabled" v-if="!item.hide"  >
                    <slot name="innerOption" :record="item" :index="i">
                        <a-tooltip placement="top">
                            <template slot="title" v-if=" tipSize && item.label && item.label.length >= tipSize ">
                                <!-- 提示文字 -->
                                <span>{{item.label}}</span>
                            </template>
                            <!-- 正常文字 -->
                            <span>{{item.label}}</span>
                        </a-tooltip>
                    </slot>
                </a-select-option>
            </template>
        </a-select>
       <a-tooltip placement="top" v-if="mode">
            <template slot="title" v-if="showSelectors.length">
                <!-- 提示文字 -->
                <span>{{showSelectors}}</span>
            </template>
            <!-- 正常文字 -->
            <a-input v-model="inputValue" ref="input" @focus="toggle(true)" @blur="toggle(false)" :placeholder="placeholder" class="input"  allowClear @change="inputChange" @click.native="toggle(true)">
            </a-input>
        </a-tooltip>
    </span>
</template>
<script>
export default {
    /**
     * author: luowei 
     * 多功能组件优化选项框, 输入输入多选和单选的作用
     */
    name: 'Ytselect',
    model:{
        prop: 'value',
        event: 'outData'
    },
    slots:{
        innerOption: 'option 内容体显示插槽'
    },
    props: {
        value: String | Number | Array,
        keyName: String,        // 当前组件的唯一标识符
        width: String,
        mode: String | Boolean,           // 选择模式同antd
        selectAllText: {       // 全选文字设置
            type: String,
            default: '全部'
        },
        options:{           // 下拉选项组
            type: Array,
            default: Array, // [{label, value, disabled, hide : false} ]
        },
        tipSize:{          // 提示文字超过长度 则提示
            type: Number | String,
            default: 0
        },
        placeholder: {    
            type: String, default: '请选择内容'
        },
        LabelsSplit: {       // input的展示文字的分隔符
             type: String, default: '、'
        },
        config: Object,  // 其他配置属性
        events: Object,  // 其他配置函数,
    },
    data(){
        return {
            selectOptions:[],      // 本地选择下拉数组
            myValue: undefined,   // 被选中后的数据
            open: false,         // 开启下拉
            lastSelect: false,  // 上一次选择内容对比值
            selected:'',    // 选择框的内容个数
            inputValue:'',  // 输入框的内容
            isSearch: false, // 搜索状态，关闭ALL选项
        }
    },
    computed:{
        showSelectors(){
            return this.options.filter(({value}) => (this.myValue || []).includes(value) ).map( ({label}) => label).join(this.LabelsSplit)
        }
    },
    watch:{
        value:{
            handler(cval){
                this.myValue = cval
            },
            immediate: true
        },
        options:{
            handler(cval){
                this.selectOptions = cval.map(item =>({...item,disabled:false, hide: false}))
                this.mode && this.computedInputText()
            },
            immediate: true
        }
    },
    methods:{
        toggle( status ){
            // 只存在为真，则显示为空，为false时刻监听了值变化
            if(status){
                 this.inputValue = ''
                 this.selectOptions.forEach(item => item.hide = false)
            } else {
                this.computedInputText()
            }  
            this.open = status
        },
        // 监听显示被选择个数的内容
        computedInputText(){
            const length = (this.myValue ?? []).filter( value => value !== 'all').length
            this.inputValue = this.selected = length ? `已经选中${length}项目` : ''
        },
        change(){
            const { myValue,lastSelect, options} = this 
            if(this.mode){
                const allSpan = options.map( item => item.value)
                const hasAll = myValue.includes('all')  // 取值包含 全部
                const valueSize = myValue.length // 取值之后长度
                const length = options.length
                if(  !lastSelect && ( valueSize === length || hasAll)) {
                    // 累计全选
                    this.myValue =[ 'all', ...allSpan ]
                } else if( hasAll && valueSize === length ){
                    // 累计不全选
                    this.myValue = this.myValue.filter(value => value !== 'all')
                }else if(lastSelect && !hasAll){
                    this.myValue = []
                }
                this.lastSelect = this.myValue.includes('all')
                this.computedInputText()
            }
            this.throwData()
        },
        // 输入框变化
        inputChange(){
            if(this.myValue.length && this.inputValue ===''){
                // 清空操作
                this.lastSelect = false
                this.myValue = []
                this.$refs['input'].focus()
            }else {
                // 开启搜索模式
                this.selectOptions.forEach( item => item.hide = !item.label.includes(this.inputValue))
                this.isSearch = true
            }

        },
        throwData(){
            this.$emit('outData', this.myValue)
            this.$emit('change', { keyName: this.keyName, value: this.myValue})
        },
    }
    
}
</script>
<style lang="scss" scoped>
.kyol-Ytselect{
    display: inline-block;
    min-width:150px;
    width:100%;
    position: relative;
    .select{
        width:100%;
        /deep/ .ant-select-selection--multiple{
            height:35px;
            overflow: hidden;
        }
    }
    .input{
        position:absolute;
        left:0;
        right:0;
        top:0;
    }
}

</style>