element-plus popover组件嵌套tree组件
需求是通过点击dialog弹出框中的输入框弹出tree组件进行多项父子嵌套的数据的选择。需求很简单,上代码:
<template>
<el-dialog title="提示" v-model="dialogVisible">
<el-popover
placement="right"
:width="400"
trigger="click"
>
<template #reference>
<el-input></elinput>
</template>
<el-tree
:data="categoryList"
:props="categoryListTreeProps"
node-key="categoryId"
@current-change="categoryListTreeCurrentChangeHandle"
:default-expand-all="false"
:highlight-current="true"
:expand-on-click-node="false"
accordion
/>
</el-popover>
</el-dialog>
</template>
一运行,ok,并没有出现任何的异常,关掉dialog框再点开,就出事了。。。点击输入框之后本应该弹出的popover框没有弹出?页面每次刷新之后第一次点击输入框都可以正常唤起popover框,但是第二次点击之后popover框没有弹出来,浏览器也没有报错,这是为什么?关于这个问题,我大概有几个猜测的方向:
- 打开dialog弹窗的时候,el-tree中的categoryList数据是否出现了破损。
- input框中的click事件有没有被触发
关于猜想一,el-tree中的categoryList数据完整,未出现损坏,并且input框点击之后触发的内容换成了不需要网络请求的元素之后,还是会出现以上的问题,排除 ×; 关于猜想二,经过 f12调试,click的事件确实有被触发,页面上会生成类名为el-popover的div标签,标签生成了,但是页面上还是没有这个元素,咦??应该是样式的问题了,display属性的值是block,z-index属性是2056,ok,既然display属性没问题,没有出现在页面上的原因看来是z-index的锅了。
页面刷新之后,第一次打开dialog框的z-index属性是2020,input框点击之后弹起的popover框z-index为2021,ok,这样popover框的层级在dialog框之上,没问题,第二打开dialog框,z-index属性变成了2023,而popover框z-index是2022,好家伙,popover框层级在dialog框之下,被dialog框盖住了!
问题确定了,现在只需要保证popover框的z-index始终比dialog框大就可以了,这里要注意的一点是,el-dialog上有append-to-body的属性,这个属性将dialog直接 插入至 body 元素上,所以不能通过外层元素定位到当前的dialog框,要想不污染其他dialog框中的el-popover的元素,这里需要采用给el-dialog添加custom-class的方式找到当前的dialog框。
//使用的时候自定义类名前加上.el-dialog
.el-dialog.tag_dialog .el-popover {
z-index: 9999 !important;
}
当然还有一种方法,给popover添加自定类名:popper-class=“category_popover”。
.category_popover {
z-index: 9999 !important;
}