分享:修改列表编辑页、详细页使用el-dialog弹窗显示

父页面:   <el-button icon="el-icon-plus" @@click="linkUrl('/index/edit')">打开子页面</el-button>            <el-dialog :visible.sync="dialogVisible" fullscree...
父页面:
  <el-button icon="el-icon-plus" @@click="linkUrl('/index/edit')">打开子页面</el-button>
           <el-dialog :visible.sync="dialogVisible" fullscreen  >
            <iframe :src="url" frameborder="0" class="dialog-iframe"></iframe>
      </el-dialog>
      .dialog-iframe{
        position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
      }

  var vm = new Vue({
            el: '#app',
            data: { 
                dialogVisible:false,
                url:'', 
            },
             mounted() { 
            window.closeDialog = this.closeDialog;
             },
            methods: { 
                initData: function () { 
               
                }
                linkUrl: function (url) {
                    this.dialogVisible=true;
                    this.url=url;
                }, 
                closeDialog(e)
                {
                  this.dialogVisible=false;
                  if(e=='add')
                  window.location.reload();
                  if(e=='edit')
                  this.initData();
                }, 
            },
            created: function () { 
                this.initData(); 
            }
        })


子页面调用方法:
parent.closeDialog();
parent.closeDialog('add');
parent.closeDialog('edit');
  • 发表于 2022-11-09 23:18
  • 阅读 ( 42 )
  • 分类:技术交流

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
chissie
chissie

1 篇文章

作家榜 »

  1. dtcms 9 文章
  2. 轻风 2 文章
  3. alinly 1 文章
  4. bear 1 文章
  5. 不思进取的.NET开发 1 文章
  6. 枫叶飘 1 文章
  7. Adam 1 文章
  8. ME860 1 文章