el-popup-parent--hidden 打开弹窗el-dialog时，导致页面宽度变化

el-popup-parent--hidden 是 Element UI（基于 Vue.js 的 UI 框架）中 el-popover、el-dialog 等弹出组件的父容器在特定条件下的一个 CSS 类名。这个类通常用于处理弹出层与页面滚动条之间的交互，以防止滚动条影响弹出层的位置和样式。

当浏览器窗口出现垂直滚动条时，滚动条会占据一定的宽度，从而导致内容区域的实际可用宽度减少。为了补偿这部分宽度，Element UI 为 .el-popup-parent--hidden 类设置了 padding-right: 12px; （或者其他值），目的是给弹出层的右边缘预留出足够的空间，避免滚动条遮挡弹出层的内容。

具体来说，在滚动条出现时，.el-popup-parent--hidden 这个类会被添加到包含弹出层的元素上，通过设置内边距来确保即使有滚动条，弹出层也能正确显示在其应有的位置上。

elementUI在打开dialog的时，页面右侧会出现滚动条，或是页面宽度会缩小，当关闭dialog后又恢复原样，控制台检查后发现当打开dialog时，body元素会有class=el-popup-parent--hidden的类名，关闭dialog后el-popup-parent--hidden类名消失，这应该就是造成页面出现滚动条或是宽度缩小的原因。

在 Element UI 的 el-dialog 组件中，有一个属性叫做 lockScroll。这个属性用于控制是否锁定背景内容滚动，当设置为 true 时，在对话框弹出时，背景页面的内容将无法滚动；而设置为 false 时，则允许背景页面滚动。 查了一下资料发现有两种解决办法，我用的是第二种方法

1. 重写el-popup-parent--hidden的样式

.el-popup-parent--hidden {
    padding-right: 0px !important;
    overflow: hidden !important;
}

2. 在main.js中添加关闭dialog滚动条配置

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 关闭dialog滚动条
ElementUI.Dialog.props.lockScroll.default = false

4. 若是按需引入

Dialog.props.lockScroll.default = false

通过以上设置，el-dialog 组件的默认滚动锁定状态将被设置为关闭，即打开对话框时背景内容可以自由滚动。