el-dialog在<其他事件--初次点击时>出现

原来的效果是：点击查看按钮，出现dialog框
现在的效果是：进入该页面，第一次点击列表时，出现dialog框。然后点击查看，正常出现dialog框。再次点击列表也不会出现dialog框。
dialog用的是visible显示隐藏

这个你的发一下，你的代码，才能知道，你具体的问题出在哪里了。

看看代码，可能是页面初始化的时候触发了弹窗 visible的值了

index.vue

<template>
  <div class="mat-back">
    <div class="mat-left">
       <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>资料分类</span>
  </div>
        <div  class="text item">
            <el-row class="tac">
            <el-col :span="12">
                <el-menu
                :default-active="this.$route.path"
                class="el-menu-vertical-demo"
                router
                @open="handleOpen"
                @close="handleClose">
                <el-input placeholder="请输入内容" v-model="filterText" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
                 <el-submenu index="1">
                    <template slot="title">
                    <img src="../../assets/literature.png">
                    <span>批复类文件</span>
                    </template>
                    <el-menu-item-group>
                    <el-menu-item index="1-1"><img src="../../assets/file.png">立项批复(1)</el-menu-item>
                    <el-menu-item index="/matable"><img src="../../assets/file.png">初设批复(3)</el-menu-item>
                    <el-menu-item index="1-3"><img src="../../assets/file.png">选址批复(4)</el-menu-item>
                    <el-menu-item index="1-4"><img src="../../assets/file.png">预审批复(3)</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                    <img src="../../assets/literature.png">
                    <span>技术类文件</span>
                    </template>
                    <el-menu-item-group>
                    <el-menu-item index="2-1"><img src="../../assets/file.png">技术1(1)</el-menu-item>
                    <el-menu-item index="2-2"><img src="../../assets/file.png">技术2(3)</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                    <img src="../../assets/literature.png">
                    <span>土地征收类文件</span>
                    </template>
                    <el-menu-item-group>
                    <el-menu-item index="3-1"><img src="../../assets/file.png">文件1(1)</el-menu-item>
                    <el-menu-item index="3-2"><img src="../../assets/file.png">文件2(3)</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                    <img src="../../assets/literature.png">
                    <span>证件类文件</span>
                    </template>
                    <el-menu-item-group>
                    <el-menu-item index="4-1"><img src="../../assets/file.png">文件1(1)</el-menu-item>
                    <el-menu-item index="4-2"><img src="../../assets/file.png">文件2(3)</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                    <img src="../../assets/literature.png">
                    <span>其他资料</span>
                    </template>
                    <el-menu-item-group>
                    <el-menu-item index="5-1"><img src="../../assets/file.png">文件1(1)</el-menu-item>
                    <el-menu-item index="5-2"><img src="../../assets/file.png">文件2(3)</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                </el-menu>
            </el-col>
            </el-row>
        </div>
        </el-card>
    </div>
    <div class="mat-right">
      
        <router-view></router-view>
      
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="scss" scoped>

.mat-back {
  height:calc(100vh - 120px);
  $h:calc(100vh - 120px);
  $w:960 / 100vw;
  min-width: 960px;
  display: flex;
  padding: 10px 10px;
  .mat-left{
    $width: 260px;
    height: $h;
    margin-right: 5px;
    box-sizing: border-box;
     .box-card {
    height: 400px;
    background-color: #113552;
    img{
      margin-right: 5px;
    }
  }
  /deep/ .el-card__header{
      height: 35px;
      border: none;
      padding: 8px 10px;
  }
  /deep/ .clearfix{
      line-height: 50px;
  }
  /deep/ .el-menu-item-group__title{
      display: none;
  }
  /deep/ .el-card__body{
      padding: 0;
      text-align: left;
  }
  /deep/ .el-menu{
      width: 258px;
      background-color: transparent;
      line-height: 40px;
      border: none;
      /deep/ .el-input-group{
          border:none;
      }
  }
  /deep/ .el-menu-item,
  /deep/ .el-submenu__title{
    color: #fff;
  }
    /deep/ .el-card{
      border: 1px solid #fff;
      border-radius: 5px;
      width: $width;
      height: $h;
      box-sizing: border-box;
    }
    /deep/ .el-card__header{
      padding: 0;
      height: 50px;
      line-height: 50px;
      color: #fff;
      background-color: rgb(63, 76, 117);
    }
    /deep/ .el-menu-item.is-active{
      color:#6582cc;
    }
    /deep/ .el-input-group{
      width: 250px;
      margin: 0 0 0 3px;
    }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  }
  .mat-right{
    flex:1;
    width: 800 / $w;
    min-width: 800px;
    height: $h
  }
}
</style>

components里的matable.vue文件

<template>
<div class="mat-right">
<div class="title-header"><span>当前位置:资料管理 > 资料分类</span></div>
<div class="table-main">
    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    stripe
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="30"> </el-table-column>
    <el-table-column type="index" label="编号"></el-table-column>
    <el-table-column prop="fileName" label="文件名称" > </el-table-column>
    <el-table-column prop="fileSize" label="大小" > </el-table-column>
    <el-table-column prop="fileFormat" label="格式" > </el-table-column>
    <el-table-column prop="uploader" label="上传人"> </el-table-column>
    <el-table-column prop="uploadDate" label="上传时间"> </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          @click="handleClick(scope.row)">查看</el-button>
        <el-button
          size="mini"
          type="success"
          @click="handleDelete(scope.$index, scope.row)">更新</el-button>
        <el-button
          size="mini"
          type="warning"
          @click="handleDelete(scope.$index, scope.row)">导出</el-button>
        <el-button
          size="mini"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
      </el-table-column>
  </el-table>
  <div class="tab-foot">
      <div class="foot-left">
    <el-button class="btn"><span>导出</span></el-button>
  <el-input placeholder="请输入内容" v-model="filterText" class="input-with-select">
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
      </div>
      <div class="foot-right">
    <el-button class="btn-r">&lt;</el-button>
    <el-button class="btn-r">1</el-button>
    <el-button class="btn-r">&gt;</el-button>
      </div>
  </div>
</div>
<MaTableCheck :madialogVisible="madialogVisible" :madialogInfo="madialogInfo" @update:madialogVisible="madialogVisibles"></MaTableCheck>
</div>
</template>

<script>
import MaTableCheck from './maTableCheck.vue';
export default {
  data () {
    return {
      tableData: [
        {
          fileName: '',
          fileSize: '',
          fileFormat: '',
          uploadDate: '',
          uploader: '',
          imgM: ''
        },
        {
          fileName: '',
          fileSize: '',
          fileFormat: '',
          uploadDate: '',
          uploader: ''
        },
        {
          fileName: '',
          fileSize: '',
          fileFormat: '',
          uploadDate: '',
          uploader: ''
        }],
      madialogVisible: "fasle",
      madialogInfo: {},
      multipleSelection: []
    }
  },
  components: {
    MaTableCheck
  },
  methods: {
    /* toggleSelection (rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
     handleSelectionChange (val) {
      this.multipleSelection = val
    } */
    // 查看
    handleClick(row) {
      console.log(row)
      this.madialogVisible = true;
      this.madialogInfo = row;
    },

    madialogVisibles(v){
        this.madialogVisible = v
        console.log(this.madialogVisible)
    }
  }
}
</script>
<style lang="scss" scoped>
$w:960 / 100vw;
$h:calc(100vh - 120px);
.mat-right{
    flex:1;
    width: 800 / $w;
    min-width: 800px;
    height: $h;
    .title-header{
      height: 40px;
      background-color: rgba(255, 255, 255, 0);
      color: #fff;
      text-align: left;
      line-height: 40px;
      padding: 0 10px;
    }
  }
.table-main{
    width: calc(100vw - 290px);
    height:calc(100vh - 160px);
    /deep/ .el-table{
        width: calc(100vw - 290px);
        height:calc(100vh - 210px);
        border-radius: 5px 5px 0 0;
    }
    /deep/ .el-table__header{
        line-height: 30px;
        background-color: #afabab;
    }
    .tab-foot{
    height:50px;
    line-height: 50px;
    display: flex;
    padding: 0 10px;
    border-radius: 0 0 5px 5px;
    background-color: rgb(202, 202, 200);
    .foot-left{
        text-align: left;
        line-height: 50px;
    }
    .foot-right{
        text-align: right;
        flex: 1;
    }
    .btn{
      background-color: rgb(63, 87, 224);
      color: #fff;
      span{
      padding: 0 10px;
      }
    }
    .btn-r{
      width: 35px;
    }
    /deep/ .el-button{
      height: 35px;
      margin: 0 5px;
      padding: 0;
    }
    /deep/.el-input__inner{
      height: 35px;
    }
    /deep/ .el-input-group--append{
      width: 250px;
    }
    /deep/ .el-input-group__append{
      height: 28px;
    }
    }
}
</style>

components里的maTableCheck.vue文件

<template>
  <div>
    <el-dialog
      title="文件查看"
      :visible.sync="madialogVisible"
      :modal-append-to-body="false"
      width="500px"
      center
    >
      <img :src="imgM" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ImgColse">确 定</el-button>
        <el-button @click="ImgColse">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    madialogVisible: {
      type: Boolean,
      default: false,
    },
    dialogInfo: {
            type: Object,
            // eslint-disable-next-line vue/require-valid-default-prop
            default: {}
        },
  },
  data() {
    return {};
  },
  methods: {
    ImgColse() {
      console.log(this.dialogInfo)
      this.$emit("update:madialogVisible", false);
    },
    /* openDialog(){
        this.$nextTick(() => {
            this.$refs.dataForm.clearValidate();
        })
    } */
  },
};
</script>

<style lang="scss" scoped>
img {
  width: 400px;
}
/deep/ .el-dialog__header {
  height: 20px;
  text-align: left;
  line-height: 20px;
}
/deep/ .el-dialog__footer {
  height: 100px;
  line-height: 100px;
  padding-bottom: 10px;
}
/deep/ .el-dialog__body {
  text-align: center;
}
</style>

madialogVisible 这个变量初始化的时候，是不是应该是 boolean - false ，而不应该是 string - "false"