当前位置：首页 > article >正文

解决element-ui的el-select使用filterable属性时，下拉框展开后，点击箭头图标收不回去问题

article 2025/2/23 11:22:56

问题：当el-select下拉组件设置filterable属性时，下拉框展开后，再点击箭头图标下拉框收不回去了

在这里插入图片描述
解决方法：
在el-select标签上新增事件 @visible-change=“selectVisibleChange” @focus="selectFocus"的处理

<el-select 
	v-model="condition.eq.userId"
	placeholder="选择操作员"
	filterable 
	ref="selectTarget" 
	@visible-change="selectVisibleChange" 
	@focus="selectFocus"
 >
   <el-option
     v-for="(item, index) in userList"
     :key="index"
     :label="item.username"
     :value="item.userId"
   >
   </el-option>
 </el-select>
 
<script type="text/javascript">
export default {
  name: "Index",
  data() {
    return {
    	selectVisible:false
	}
  },
  methods:{
    selectVisibleChange(val) {
      setTimeout(() => {
        this.selectVisible = val
      }, 0)
    },
    selectFocus() {
      if (this.selectVisible) {
        this.$refs.selectTarget.blur()
      }
    }
  }
};
</script>