«

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>