element ui 设置el-dialog2级弹窗

步骤1，通过<el-button type="text" @click="dialogTableVisible = true">添加活动</el-button>

弹出第一层，themeData设置成你循环的数据

<el-button type="text" @click="dialogTableVisible = true">添加活动</el-button>

<!--第一层弹窗-->
<el-dialog width="80%" height="500"  title="模板库" :visible.sync="dialogTableVisible"> 
  <el-row style="height:500px;">
    <el-col :span="4" v-for="(value, key) in themeData" :key="o" >
      <el-card style="margin-bottom: 15px; margin-right:15px; " :body-style="{ padding: '0px' }">
        <el-image  :src="value.image" ></el-image>
        <div style="padding: 14px;">
          <div class="bottom clearfix">
            <time class="time">{{ value.name }}</time>
            <template>
    
        <el-button type="text" modal="true"  @click="addVote(value.id)">点击打开</el-button>
<!--第二层弹窗-->
        <el-dialog
                title="添加活动"
                :visible.sync="dialogVisible"
                fullscreen=true
                append-to-body>   
            <iframe :src="url" frameborder="0" width="100%" height="660px;"></iframe>
        </el-dialog>
       </template>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</el-dialog>

步骤2，通过循环里面的

<el-button type="text" modal="true"  @click="addVote(value.id)">点击打开</el-button>

弹出第二层，弹窗代码如下

addVote(id){
        this.dialogVisible=true;
        this.url=this.url+"?id="+id;
        
    },

 <iframe :src="url" frameborder="0" width="100%" height="660px;"></iframe>

是第二层的内容

#新人福利# #element ui# #element弹窗#