elementui select下拉框输入完全匹配值则下拉隐藏
emer 发布于 2019-10-17 17:31 10854 次阅读
链接:https://codepen.io/liniaa/pen/PooGoMM?&editable=true
这个产品设计实际有缺陷的,如果有a,ab那么只能选中a,解决方案是设置个定时器更新value,
如果继续输入则关闭定时器,不过还不如让用户选,产品设计有缺陷
<script src="//unpkg.com/vue/dist/vue.js"></script>var Main = { data() { return { optionsCopy: [{ value: '1', label: 'meat' }, { value: '2', label: 'drink' }, { value: '3', label: 'food' }, { value: '4', label: '龙须面' }, { value: '5', label: '北京烤鸭' }], options: [{ value: '1', label: 'meat' }, { value: '2', label: 'drink' }, { value: '3', label: 'food' }, { value: '4', label: '龙须面' }, { value: '5', label: '北京烤鸭' }], value:"" } }, methods:{ change(val) { // this.value = val; if (val) { //val存在 var _this=this this.options = this.optionsCopy.filter((item) => { if (!!~item.label.indexOf(val) || !!~item.label.toUpperCase().indexOf(val.toUpperCase())) { console.log(item.label,'----',val) if(item.label===val){//如果要继续输入的可以匹配这里定时器更新,并且输入时候需关闭定时器 this.value=item.value this.$refs.mySelect.blur() } return true } }) } else { //val为空时,还原数组 this.options = this.optionsCopy; } } } } var Ctor = Vue.extend(Main) new Ctor().$mount('#app')<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script> <div id="app"> <template> {{value}} <el-select v-model="value" filterable placeholder="请选择" :filter-method="change" ref="mySelect"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </template> </div>