需求

全靠一张图！

产品：下拉框里面要有搜索，要有点击加载更多，如果全部显示出来的，隐藏点击加载更多！.....

分析

antdv有没有现成的？

别说，还真有，那不是简单了哈哈哈哈

代码

<a-select
    v-model="form.name"
    placeholder="请选择XXX"
    :open="openSelect"
    @select="setName"
    @dropdownVisibleChange="changeDropDownOpen">
    <div slot="dropdownRender" slot-scope="menu">
        <div class="search_tip" @click="(focusSearch=true)">
          <a-input type="text" v-model="name" placeholder="搜索" @pressEnter.stop="addName(1)">
            <a-icon slot="suffix" type="search" @click.stop="addName(1)"/>
          </a-input>
        </div>
        <v-nodes :vnodes="menu" />
        <div v-show="isAll" class="more_tip" @click="addName(2)">点击加载更多</div>
    </div>
    <a-select-option v-for="item in nameList" :key=item.id :value="item.name" :id="item">{{ item.name }}</a-select-option>
</a-select>


data(){
    return {
        focusSearch: true,
        form:{
            name: ''
        },
        nameList:[]，
        focusSearch: false,
        openSelect: false,
        // 是判断是否已经是全部的数据，如果是全部的数据，那就不需要展示加载更多
        isAll: true
    }
}

methods:{
    // 下拉框展示与否的函数
    changeDropDownOpen(v){
        // 这里用了点击事件来模拟焦点在搜索框时的情况，如果此时焦点在搜索框上，那么就不关闭下拉框
        if(this.focusSearch) return;
        this.openSelect = v;
    },
    addName(type){
        // type分了两种，一种是搜索的，一种是点击加载更多的
        // 1: pageNo = 1
        // 2: pageNo++
        // 具体业务逻辑，看产品！哈哈哈哈
    },
    setName(op){
        // 在点击option时把下拉框回收
        this.form.name = op.data.attrs.id.name;
        this.focusSearch = false;
        this.openSelect = false;
    }
}

• slot="dropdownRender" 可以自定义下拉框
• <v-nodes :vnodes="menu"> 是selectOption

效果