element 可筛选下拉框切换下拉框弹出问题

AS、SD

已于 2022-06-24 10:23:05 修改

阅读量1.9k

点赞数 1

分类专栏： VUE js 文章标签： vue.js 前端

于 2022-06-23 11:35:44 首次发布

本文链接：https://blog.csdn.net/qq_42988102/article/details/125423882

版权

VUE 同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

这篇博客探讨了在Vue项目中使用el-select组件时遇到的问题，即当添加filterable属性后，页面切换会导致下拉框自动弹出。通过分析，提出了解决方案——利用el-select的visible-change事件，在选中时让其失去焦点，而在隐藏时重新获取焦点。示例代码展示了如何实现这一方法，从而避免了下拉框在不应出现时弹出的问题。

摘要由CSDN通过智能技术生成

当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>