使用 Element-UI 显式关闭下拉菜单

Question

我在使用 ElementUI 的 Vue 应用程序中有一个下拉菜单，我需要在应用一些逻辑后明确关闭它。

基本上流程是：

页面加载，用户单击下拉列表中的名称 - 名称值被写入数据库
用户重新加载页面，点击不同的名称，弹出窗口询问他们是否要保存新名称

此时，如果用户确认他们的选择，新名称将写入数据库，但下拉列表保持打开状态。我需要在用户确认他们在第 2 步中的选择后添加一些逻辑来调用，以确保下拉列表不会保持打开状态。

<div class="part">
    <span class="for-label"> Employee: </span>
    <el-select v-model="dataValue.assignedUser" filterable :disabled="notClick" @change="handle">
      <el-option
        v-for="(user, userIndex) in assignedOption"
        :key="userIndex"
        :label="user.userName"
        :value="user.userEmail"
      />
    </el-select>
  </div>

如果相关，此错误仅在将“可过滤”属性添加到 el-select 后才开始出现。

Answer 1

我不知道为什么它会保持打开状态，但您应该可以通过调用它的 blur 函数来关闭它。

将 ref 添加到 select 并在它应该关闭时调用以下内容。

this.$refs.select.blur()

使用 Element-UI 显式关闭下拉菜单

Explicitly Close Dropdown Menu Utilizing Element-UI

javascript

vue.js

element-ui