element中popover弹框中有选择器，点击后popover消失的解决办法

element中有很多组件，经常用到的一个popover组件，很多时候大家都是使用它展示一些页面放不下或者不好放置的内容，很少在里面使用一些选择器，输入框等组件。

默认配置中，在使用到选择器组件时，一旦点击下拉选项，popover就会消失，这很明显不是我们想要的实现效果。

在hover=“click”的popover中，组件的显示与否，主要看鼠标click点击时的标签是否对应的弹出框中。如果不是的话就会隐藏，如果是的话，就不会隐藏，懂了这个逻辑，我们就应该去看一下官网是不是有对应的属性提供给我们。

可以看到，组建中的popperAppendToBody属性决定了对应的弹框append到哪个父节点上。

默认的话是body，如果这个属性改成false就变成了append到对应的select标签下面。

这个时候点击下拉选项中的内容，也相当于是在对应的父弹框中点击，而不是append到body中的标签，自然刚刚打开的popover也就不会消失了。

可能描述的不够详细，代码配置其实也就一行。

**:popperAppendToBody="false"**

下面给出一个使用的例子

```

<el-popover placement="right" width="400" trigger="click">

<div>

<el-select

:popperAppendToBody="false"

v-model="value"

placeholder="请选择"

<el-option

v-for="item in options"

:key="item.value"

:label="item.label"

:value="item.value"

</el-option>

</el-select>

</div>

<el-button>click 激活</el-button>

</template>

</el-popover>

```

有兴趣的同学可以对比下添加跟不添加这个属性时对应的DOM结构。