基于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>