Element Plus embeds the select selector in the popover pop-up box, and the pop-up box is closed after the option is selected.

Element Plus embeds the select selector in the popover pop-up box, and the pop-up box is closed after the option is selected.

1 Problem description

In the Vue3 + Element Plus project, after embedding the selector component el-popoverin the pop-up box component , and clicking the selector to select an option, not only the selector's option pop-up box is closed, but also the pop-up box of the outer component is closed. The relevant code is as follows:el-selectel-selectel-selectel-popover

<el-popover :width="400" trigger="click">
  <template #reference>
    <el-button type="primary">发布</el-button>
  </template>
  <template #default>
    <div class="popover-title">发布文章</div>
    <el-form class="popover-form">
      <el-form-item class="popover-form-item" label="建议分类" required>
      	<el-select
          class="form-item-select"
          placeholder="请选择一个分类"
          @change="onSelectCategoryItem"
          v-model="articleInfo.categoryId"
        >
          <el-option
            :key="item.categoryId"
            :value="item.categoryId"
            :label="item.categoryName"
            v-for="item in categoryOptions"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </template>
</el-popover>

2 Causes

el-popoverThe closing logic of the popover component is that when an element other than the popover is clicked, the popover will be closed. However el-select, the options pop-up box is rendered for page elements by default, not for parent elements. In other words, el-selectthe options pop-up box is not el-popoveron the pop-up box. Clicking the options pop-up box will trigger the closing condition of the popover pop-up window box. Therefore, el-selectafter selecting the selector option, the outer el-popoverpop-up box will also be closed.

3 solutions

After searching the Select selector component documentation of the CSDN related blog Element Plus , I found that the Select selector has an attribute teleportedthat can control the rendering position of the options pop-up box.

teleportedThe default value of the attribute is true, and you only need to assign it a value of false in the code to solve the problem.

<el-select
	:teleported="false"
></el-select>