<el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose" append-to-body > <span>This is a message</span> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false">Cancel</el-button> <el-button type="primary" @click="dialogVisible = false"> Confirm </el-button> </span> </template> </el-dialog>
// 修改对话框的样式，没有生效 <style lang="less" scoped> ::v-deep .el-dialog { border-radius: 10px !important; } ::v-deep .el-dialog--center .el-dialog__body { padding: 18px 26px 5px !important; } </style>
原因：对话框el-dialog上添加了append-to-body属性（也不知道怎么加了这个属性）
解释：首页，什么时候用到append-to-body这个属性——>嵌套对话框的时候。
官方对于嵌套对话框是这么说：不建议使用嵌套对话框。若需要在页面上呈现多个对话框，可以简单打平它们，让它们处于一个平级关系。
若一定要对话框内展示另一个对话框，那就给内部嵌套的对话框设置append-to-body属性。但是这样的话，嵌套的对话框就会附加到body上，
而不是父节点，这是为了两个对话框都可以被正确的渲染。
换句话：设置了append-to-body属性的el-dialog只受body的样式控制，不受父节点的样式控制。