基于element+vue，结合el-select，自定义内置筛选框的下拉框组件

基于element+vue，结合el-select，自定义内置筛选框的下拉框组件

效果如下：

代码如下：

<template>
    <div class="m-t50 m-l50">
        <el-select class="phoneAreaCodeSelect" popper-class="select-down" v-model="mobileCode" placeholder="请选择" @visible-change="changeSelect">
            <div class="phoneAreaCodeSelect-top" :style="phoneAreaCodeListShow.length==0?'position:inherit;margin-top:-6px;':''">
                <div class="dropDownSearchBox el-input f-r a-c">
                    <input type="text" placeholder="搜索" class="dropDownSearchInput el-input__inner" v-model="dropDownSearchValue" @keyup="dropDownSearch">
                    <span class="f-r a-c el-input__suffix">
                        <span class="el-input__suffix-inner">
                            <i class="el-input__icon el-icon-search"></i>
                        </span>
                    </span>
                </div>
            </div>
            <div class="phoneAreaCodeSelect-bottom" :style="phoneAreaCodeListShow.length==0?'margin-top:0;':''">
                <el-option :label="item.name" :key="index" :value="item.code" v-for="(item, index) in phoneAreaCodeListShow">
                    <span>（{{ item.code }}）</span>
                    <span style="color: #8492a6; font-size: 13px">{{ item.name }}</span>
                </el-option>
            </div>
        </el-select>
    </div>
</template>

<script>
import typeService from "@/services/common/type";

export default {
    components: {},
    data() {
        return {
            mobileCode:"",
            phoneAreaCodeListAll:[],
            phoneAreaCodeListShow:[],
            dropDownSearchValue: '',
        }
    },
    mounted() {
         this.getPhoneAreaCodeList();
    },
    methods: {
        //获取电话号码区域号列表
        async getPhoneAreaCodeList() {
            let { list } = await typeService.getPhoneAreaCodeList();
            this.phoneAreaCodeListAll = list;
            this.phoneAreaCodeListShow = list;
        },

        //下拉框根据关键字搜索
        dropDownSearch () {
            let _this = this;
            _this.mobileCode = "";
            _this.phoneAreaCodeListShow = _this.phoneAreaCodeListAll.filter(_this.filterSearch);
        },
 
        //根据关键字筛选区域号列表
        filterSearch (item) {
            return item.name.includes(this.dropDownSearchValue);
        },

        //切换下拉框显隐
        changeSelect(e){
            //隐藏下拉框时，重置搜索框及下拉列表
            if(!e){
                this.dropDownSearchValue = "";
                this.phoneAreaCodeListShow = this.phoneAreaCodeListAll;
            }
        },
    }
}
</script>

<style lang='less' scoped>
.phoneAreaCodeSelect {
    border: 1px solid #089BAB;
    border-radius: 7px;
}
.phoneAreaCodeSelect-top {
    width: 100%;
    height: 34px;
    position: absolute;
    z-index: 5;
    top: 0;
    background-color: #ffffff;
}
.phoneAreaCodeSelect-bottom {
    margin-top: 40px;
    .el-select-dropdown__item {
        width: 368px;
        height: 33px;
    }
}
.dropDownSearchBox {
    width: calc(100% - 18px);
    margin-left: 9px;
    margin-right: 9px;
    margin-top: 8px;
    .el-input__inner::placeholder {
        font-size: 12px;
    }
}
.dropDownSearchInput {
    height: 26px;
    background-color: rgb(245, 247, 250);
    border-radius: 6px;
}
.select-down .el-scrollbar {
    display: block !important;
}
</style>

如有漏洞，欢迎宝子们互动指教吖！！！！！！！！！！！！！