问题
在 el-popover 弹出框组件中嵌入 el-select 选择器组件后,点击 el-select 选择器选中选项后,不仅 el-select 选择器的选项弹框关闭了,外层 el-popover 组件的弹框也一并关闭了。
原因
el-popover 弹出框组件的关闭逻辑是当点击 popover 弹框以外的元素时,弹框就会关闭。然而 el-select 的 options 弹框默认是针对页面元素进行渲染的,而不是针对父元素渲染。也就是说, el-select 的 options 弹框不在 el-popover 弹出框上,点击options 弹框后会触发 popover 弹窗框的关闭条件,此就会造成选择 el-select 选择器的选项后,外层的 el-popover 弹出框也会关闭。
解决
select文档后发现,Select 选择器有一个属性 teleported,该属性可以控制 options 弹框的渲染位置。teleported 属性的默认值为 true,只需要在代码中给其赋值为 false 即可解决该问题。
<el-table :data="tableData">
<el-table-column
v-for="(item, index) in headData"
:key="index"
:prop="item.value"
:label="item.label"
>
<template #header>
<el-popover placement="bottom" trigger="click" >
<template #reference>
<span> {{ item.label }} ∨ </span>
</template>
<!-- 筛选 -->
<el-select
v-model="housingEstateName"
filterable placeholder="请选择小区"
@click.stop :teleported="false" (主要解决问题)
>
<el-option
v-for="item in housingEstateOptions"
:key="item.value" :label="item.label"
:value="item.value"
> </el-option>
</el-select>
</el-popover>
</template>
</el-table>
注意:文章借鉴其他文章,我只是代码的搬运工!!!