如何在Element-UI与Vue.js中选择选项后触发Select的blur事件？

嘿，我之前做项目时刚好遇到过类似的需求，Element-UI的多选Select组件默认在选择选项后不会自动触发blur事件，不过有几个实用的办法可以实现这个效果：

方法一：利用change事件手动触发blur #

每次选择或取消选项时，change事件都会被触发，我们可以借助这个事件来手动调用组件的blur方法。

步骤： #

1. 给<el-select>添加一个ref属性，方便获取组件实例：

<el-select 
  ref="citySelect"
  v-model="form.city" 
  multiple 
  filterable 
  remote 
  auto-complete="address-level2" 
  no-match-text="No data found" 
  :remote-method="remoteMethod" 
  :loading="loading" 
  placeholder="Select City"
  @change="handleCityChange"
>
  <el-option v-for="(item,index) in cities" :key="index" :label="item.name" :value="item.key"></el-option>
</el-select>

2. 在Vue实例中定义handleCityChange方法，延迟触发blur（确保DOM更新完成）：

methods: {
  handleCityChange() {
    // 加个小延迟避免DOM未更新导致blur失效
    setTimeout(() => {
      // 调用组件的blur方法
      this.$refs.citySelect.blur()
    }, 100)
  },
  // 你的remoteMethod等其他方法...
}

方法二：监听下拉菜单的visible-change事件 #

当下拉菜单关闭时（也就是选择完选项后），触发blur事件，这个逻辑更贴合“选择完成后失焦”的场景。

步骤： #

1. 给<el-select>添加visible-change事件监听：

<el-select 
  ref="citySelect"
  v-model="form.city" 
  multiple 
  filterable 
  remote 
  auto-complete="address-level2" 
  no-match-text="No data found" 
  :remote-method="remoteMethod" 
  :loading="loading" 
  placeholder="Select City"
  @visible-change="handleSelectVisibleChange"
>
  <el-option v-for="(item,index) in cities" :key="index" :label="item.name" :value="item.key"></el-option>
</el-select>

2. 定义对应的处理方法：

methods: {
  handleSelectVisibleChange(visible) {
    // 当下拉菜单关闭且不在加载状态时触发blur
    if (!visible && !this.loading) {
      this.$refs.citySelect.blur()
    }
  },
  // 你的remoteMethod等其他方法...
}

这里加上!this.loading的判断，是为了避免远程搜索加载过程中误触发blur，影响用户体验。

补充说明 #

Element-UI的多选Select默认不会自动失焦，是因为它支持连续选择多个选项，下拉菜单会保持打开状态。如果你的场景是选完目标选项后就希望组件失焦，上面的方法都能很好地满足需求。

内容的提问来源于stack exchange，提问作者Mahesh Singh