html - element ui dialog box nesting

Question

element ui dialog box nesting

<el-dialog>
    <el-dialog></el-dialog>
</el-dialog>

If this is the case, it will cause the inner dialog box to be in the outer dialog box area. How to make the el-dialog separate from the body directly.

Do all dialog boxes of element ui have to be written externally and cannot be nested

Answer 1

The dialog of element ui cannot be inserted into the body. It is written simply and does not provide this function. It can be seen from its usage that it basically controls the visibility of the dialog through display, and the dialog position remains unchanged.

Answer 2

To achieve the nested pop-up effect, you don’t have to nest it on the template

You can put them all in the parent component (body), and the dialog inside can be triggered and displayed in the outside dialog

Example, click the second button to see details: https://jsfiddle.net/w0uypwng/