ElementUI （dialog弹框）封装在组件中在父组件调用

刺骨的言语ヽ痛彻心扉 2022-12-27 11:05 326阅读 0赞

再记一遍dialog在父组件中的调用问题！！  
具体实现：v-for循环生成的一个card信息，点击详情查看该card具体信息，详情页在dialog里显示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center 1]  
下面记录一下代码（都是前端写死的数据）：  
index.vue //展示页面

<template>
      <basic-container>
        <el-row v-for="(item, index) in dataList" :key="item.id" >
          <div :class="index != 0 ? 'row' :'' ">
            <el-card >
              <div slot="header" class="clearfix">
                <span>xxxxxxxxxxxxxxxxxxxxxx</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="edit(item.id)">详情</el-button>
              </div>
              <div class="text item">
               xxxxxxxxxxxxxxxxxxxxxx
              </div>
              <div class="text item">
                xxxxxxxxxxxxxxxxxxxxxx
              </div>
              <div class="text item">
                 xxxxxxxxxxxxxxxxxxxxxx
              </div>
              <div class="text item">
               xxxxxxxxxxxxxxxxxxxxxx
              </div>
              <div class="text item">
                 xxxxxxxxxxxxxxxxxxxxxx
              </div>
              <div class="text item">
                 匹配度: 100%
              </div>
            </el-card>
          </div>
        </el-row>
        
        <table-form v-if="editVisible" ref="edit"></table-form>
      </basic-container>
    </template>
    <script>
      import TableForm from './editMatch.vue'
      export default { 
        data() { 
          return { 
            editVisible:false,
          }
        },
        components: { 
          TableForm
        },
        methods:{ 
          //详情
          edit(id){ 
            this.editVisible = true
            this.$nextTick(() => { 
              this.$refs.edit.init(id)
            })
          }
        }
      }
    </script>
    
    <style>
      .el-row { 
        margin-bottom: 20px;
        &:last-child { 
          margin-bottom: 0;
        }
      }
      .el-col { 
        border-radius: 4px;
      }
    
      .text { 
        font-size: 14px;
      }
    
      .item { 
        margin-bottom: 18px;
      }
    
      .clearfix:before,
      .clearfix:after { 
        display: table;
        content: "";
      }
      .clearfix:after { 
        clear: both
      }
    
      .box-card { 
        width: 480px;
        background: burlywood;
      }
      .deleteBorder .el-tabs__nav-wrap::after{ 
        height: 0;
      }
    
      .deleteBorder .el-tabs__active-bar{ 
        background: transparent;
      }
      .row { 
        border-top:1px #000000 solid;
      }
    </style>

editMatch.vue//弹窗页面

<template>
      <el-dialog width="800px" title="企业匹配详情" :visible.sync="editVisible">
        
        <el-row>
          <el-card>
            <div slot="header" class="clearfix">
              <span>匹配度：20%</span>
              <span>xxxx</span>
            </div>
            <div class="text item">
             xxxx
            </div>
          </el-card>
        </el-row>
      </el-dialog>
    </template>
    
    <script>
      export default { 
         data() { 
           return { 
            editVisible:false,
           }
         },
         methods:{ 
           init(id){ 
             this.editVisible = true
             // console.log(id)
           },
    
         }
       }
    </script>
    
    <style>
      .text { 
        font-size: 14px;
      }
      .item { 
        margin-bottom: 18px;
      }
      .clearfix:before,
      .clearfix:after { 
        display: table;
        content: "";
      }
      .clearfix:after { 
        clear: both
      }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/6cfb6d78f34442699081aa9b5617717b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201210134818100.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds,size_16,color_FFFFFF,t_70#pic_center