elementui el-select 可筛选下拉框切换或者切屏 下拉框自动弹出问题

当el-select添加filterable属性时切换页面下拉框会弹出,主要问题就是因为filterable属性,根本解决方案是选中的时候让他失去焦点 el-select有一个visible-change事件,下拉框出现/隐藏时触发

 

 

<template>
  <el-select v-model="value" filterable placeholder="请选择" ref='select' @visible-change='change'>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    },
    methods:{
    	change(item){
    		if(item){
    			this.$refs.select.focus()
    		}else{
				this.$refs.select.blur()
			}
    	}
    }
  }
</script>

posted @ 2022-09-19 16:32  赵辉Coder  阅读(1467)  评论(1编辑  收藏  举报