嵌套谈话框，不显示第二层？

Question

<el-table-column label="姓名" prop="username">
          <template slot-scope="scope">
            <el-button type="text" v-model="scope.row.username" @click="showEmbedDialogVisible(scope.row.id)">{{
              scope.row.username }}</el-button>
          </template>
        </el-table-column>

 <el-dialog title="用户信息" :visible.sync="outerDialogTableVisible">
        <el-table :data="userList">
          <el-table-column prop="username" label="姓名" width="150"></el-table-column>
          <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
          <el-table-column prop="mobile" label="手机"></el-table-column>
        </el-table>
        <el-dialog :visible.sync="innerVisible" title="内层 Dialog" append-to-body>
          <el-table :data="userList">
            <el-table-column property="username" label="姓名" width="150"></el-table-column>
            <el-table-column property="email" label="邮箱" width="200"></el-table-column>
            <el-table-column property="mobile" label="手机"></el-table-column>
          </el-table>
        </el-dialog>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="innerVisible">展示第二层</el-button>
        </span>
      </el-dialog>

async showEmbedDialogVisible (id) {
      const { data: res } = await this.$http.get(`users/${id}`)
      if (res.meta.status !== 200) return this.$message.error('根据ID查询用户失败！')
      this.$message.success('根据用户ID查询身份信息成功！')
      this.editForm = res.data
      this.outerDialogTableVisible = true
      this.innerVisible = true
    }

Answer 1

vue2:

Vue3

https://element-plus.gitee.io/zh-CN/component/dialog.html#%E5...

Answer 2

测试了下可以显示，不过首次显示层级关系有问题，inner会被盖在下面,你可以看下是不是层级关系的问题