`element-ui`组件`el-popover`嵌套使用，鼠标移动到里层el-popover导致外层el-popover关闭，请问如何处理？
element-ui组件el-popover嵌套使用的问题，在使用el-popover显示内容时，内容里面还需要使用到el-popover，都是hover触发方式，当鼠标移动到里面的el-popover时，外面的el-popover就自动关闭了，请问如何处理这个问题？
共有1个答案
当你在使用element-ui的el-popover组件进行嵌套时，遇到了鼠标移动到内层el-popover导致外层el-popover关闭的问题，这是因为内层el-popover的显示可能会触发外层el-popover的mouseleave事件，从而导致其关闭。
为了解决这个问题，你可以考虑以下几种方法：
- 使用
disabled属性：
当内层el-popover显示时，你可以禁用外层el-popover的关闭功能。这可以通过动态绑定disabled属性来实现。
<el-popover v-model="outerVisible" :disabled="innerVisible" trigger="hover"> <!-- 外层内容 --> <el-popover v-model="innerVisible" trigger="hover" > <!-- 内层内容 --> </el-popover></el-popover>在上面的代码中，当innerVisible为true（即内层el-popover显示）时，外层el-popover的disabled属性为true，这样它就不会因为鼠标移动而关闭了。
- 自定义触发方式：
考虑不使用hover触发方式，而是使用click或其他方式。这样，你可以更好地控制何时显示和隐藏el-popover，从而避免上述问题。
- CSS样式调整：
有时，通过调整CSS样式，例如增加z-index或调整el-popover的位置，可以避免触发mouseleave事件。
综上所述，你可以根据具体的应用场景和需求选择合适的方法来解决这个问题。
-
项目中使用到ele组件el-popover，页面上有不同类型的提示框，有些鼠标移上去显示，有些需要进入页面后就一直显示，且不会关闭。 鼠标移上去显示好实现：直接trigger='hover'救可以了，但是进入页面就一直显示的我使用方式 这么做确实能进入页面后一直显示，但是样式却不正常（和通过hover展示出来的样式），没有箭头，且紧紧挨着'reference'对象。 正常通过hover触发如下：
-
组件el-popover默认情况下会挂载到body下面，但是现在需要挂载到指定id的dom下，该如何操作？（挂到父节点下不行，因为父节点比较小，导致popover全部显示在右侧——设置placement无效）。 现在需要挂在到id='nodes-wrapper'的div下，该如何写？
-
页面上有很多动态生成的el-popover，有可能堆叠，所以我希望能够手动控制z-index属性，例如，如果鼠标移动上去，我将某个el-popover的z-index加1，如此来控制弹框显示，改怎么设置呢 ？
-
popover类似于工具提示，提供带有标题的扩展视图。 要激活弹出框，用户只需将光标悬停在元素上。 可以使用Bootstrap Data API完全填充popover的内容。 此方法需要工具提示。 如果你想单独包含这个插件功能，那么你将需要popover.js并且它具有tooltip plugin的依赖性。 另外，如Bootstrap插件概述一章所述，您可以包含bootstrap.js或缩小的bo
-
描述 (Description) 打开和关闭弹出窗口可以通过以下两种方式实现 - S.No 类型和描述 1 来自 HTML 可以使用链接上的特殊类和数据属性打开和关闭所需的弹出框。 2 使用 JavaScript 可以使用相关的app方法使用JavaScript打开和关闭Popover。
-
项目中需要用到el-tree做拖拽功能，但是层级有限制要求，例如：不能超过6级，但是allow-drop提供的方法参数感觉有问题，参照的层级对不上，导致计算有问题。