背景
业务是在el-dialog组件里有一个选择日期范围的组件,但是当准备点击日期组件去选择日期时,却发现日期组件弹框被el-dialog遮挡了,如图:
初步调试
遇到问题解决问题,于是F12开始调试,发现被遮挡的原因是日期组件弹框的z-index比el-dialog组件的el-dialog__wrapper元素的z-index小,如图:
于是我强制将mx-datepicker-popup的z-index设置为2004,但是发现第一次点开el-dialog组件的时候日期组件的弹框没有被遮挡,但是关闭el-dialog再次打开的时候日期组件的弹框又被遮挡住了。
继续调试
接着又继续调试,发现el-dialog组件每次关闭后再打开el-dialog__wrapper元素的z-index会递增,这也是为什么第一次点开el-dialog组件的时候日期组件的弹框没有被遮挡,但是关闭el-dialog再次打开的时候日期组件的弹框又被遮挡住了。
从截图可以看出确实每次关闭再打开z-index会递增。
终极解决方案
在el-dialog组件上添加一个z-index="1000"属性
<el-dialog
title="选择销售合同"
:visible.sync="dialogVisible"
:modal-append-to-body="true"
:close-on-click-modal="false"
append-to-body
z-index="1000"
custom-class="micro-app-report sale-contract-dialog"
@close="handleClose"
width="1400px"
top="10vh"
>