如果你对el-dialog做了这样的优化
.el-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
flex: 1;
overflow: auto;
}
那么你的页面就会这样
解决方法不是乱七八糟的这样
.reprint-remark-form .el-form-item__error {
transition: none!important;
}
.el-icon-caret-right {
transition: none!important;
}
…………
或是这样(此方法可行,但是模态框模糊)
.el-dialog.visibility-hidden {
backface-visibility: hidden;
}
或是增加高度 增加padding的问题(也行,布局不一样了)
这些都无法根本解决你的问题,其实最关键的问题出在这里
.el-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);/*就是这一行神奇的代码导致你的页面闪烁的*/
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}
那我们改个方案
.el-dialog__wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.el-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
flex: 1;
overflow: auto;
}
修改完后你会发现之前困扰的问题都没有了
找到问题的根本,才是解决问题的制胜法宝