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

再记一遍dialog在父组件中的调用问题！！
具体实现：v-for循环生成的一个card信息，点击详情查看该card具体信息，详情页在dialog里显示。


下面记录一下代码（都是前端写死的数据）：
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>