elementui select下拉框输入完全匹配值则下拉隐藏
首页 > >    作者:lininn   2019年10月17日 17:31 星期四   热度:8642°   百度已收录  
时间:2019-10-17 17:31   热度:8642° 
链接: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>



二维码加载中...
本文作者:lininn      文章标题: elementui select下拉框输入完全匹配值则下拉隐藏
本文地址:?post=401
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn