Element Plus 在 popover 弹出框中嵌入 select 选择器，选中选项后弹出框被关闭

1 问题描述

Vue3 + Element Plus 项目中，在 el-popover 弹出框组件中嵌入 el-select 选择器组件后，点击 el-select 选择器选中选项后，不仅 el-select 选择器的选项弹框关闭了，外层 el-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 引发原因

el-popover 弹出框组件的关闭逻辑是当点击 popover 弹框以外的元素时，弹框就会关闭。然而 el-select 的 options 弹框默认是针对页面元素进行渲染的，而不是针对父元素渲染。也就是说， el-select 的 options 弹框不在 el-popover 弹出框上，点击options 弹框后会触发 popover 弹窗框的关闭条件，因此就会造成选择 el-select 选择器的选项后，外层的 el-popover 弹出框也会关闭。

3 解决方法

经查找 CSDN 相关博客 Element Plus 的 Select 选择器组件文档后发现，Select 选择器有一个属性 teleported，该属性可以控制 options 弹框的渲染位置。

teleported 属性的默认值为 true，只需要在代码中给其赋值为 false 即可解决该问题。

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