<el-popover>与<el-select>冲突--选择下拉后会不要关闭popover弹出框

412 阅读1分钟

问题

在 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 即可解决该问题。

image.png

<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>

注意:文章借鉴其他文章,我只是代码的搬运工!!!