iframe渲染表单数据

最新推荐文章于 2023-09-25 20:10:54 发布

Aoligeiei

最新推荐文章于 2023-09-25 20:10:54 发布

阅读量798

点赞数 1

分类专栏： vue layui 文章标签： vue

本文链接：https://blog.youkuaiyun.com/JEROCHAN/article/details/107192974

版权

vue 同时被 2 个专栏收录

2 篇文章

订阅专栏

layui

1 篇文章

订阅专栏

本文介绍如何在iframe中使用Vue框架，通过数据双向绑定实现父层页面与子层页面间的数据传递，特别是在表单中自动渲染和检查数据。在子层页面的form表单中隐藏提交按钮，利用Vue的特性，可以在用户修改时自动获取并显示之前设置的值，同时讨论了可能存在的冲突问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iframe渲染表单数据

父层页面调用子层页面时，利用iframe的形式打开页面，父层与子层之间传递数据

父层页面

//layui窗口打开一个iframe 
layer.open({
      type: 2
      ,title: '修改账户'
    //url
      ,content: 'form.html'
      ,area: ['420px', '420px']
      ,btn: ['修改', '取消']
    //打开窗口成功后的操作
      ,success:function(layero, index){
        //获取新窗口对象
        var iframeWindow = window['layui-layer-iframe'+ index];
        //重新渲染
        layui.$.ajax({
          type: 'post',
          url: localhostHead + '/user/info/' + userid,
          dataType: "json",
          contentType: "application/json",
          success: function (data) {
              //渲染表单
            //调用子层定义的方法
            iframeWindow.setdata(data.data);   
          
          }
        });
          
               
        //form.render();
        //layui.form('select').render()
      }
    //当iframe点击确定按钮时的操作
      ,yes: function(index, layero){
        var iframeWindow = window['layui-layer-iframe'+ index]
        ,submit = layero.find('iframe').contents().find("#LAY-user-submit");
                  
          //监听提交
          iframeWindow.layui.form.on('submit(LAY-user-submit)', function(data){
            var  field= data.field; //获取提交的字段
            field["id"]=userid;
            //提交 Ajax 成功后，静态更新表格中的数据
                   
            layer.close(index); //关闭弹层
          });  
          
          submit.trigger('click');
        }
      });

子层页面

function setdata(data) {
          //渲染表单
          layui.use('form', function(){
              var form = layui.form;
              //根据的type类型修改
              form.val("layuiadmin-form-admin", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                  "userName": data.userName// "name": "value",
              });
 
              console.log(data);
          });

    };

效果：打开iframe窗口时查询表格点击行的值后自动渲染数据，实现用户修改时自动获取之前设置好的值的功能

注意事项：

在iframe层的form表单隐藏一个提交按钮，可实现检查表单填写的数据是否正确的功能

 <div class="layui-form-item layui-hide">
      <input type="button" lay-submit lay-filter="LAY-user-submit" id="LAY-user-submit" value="确认">
    </div>

结合vue,js

突然想到vue框架可以进行数据双向绑定，炒鸡耐用，不过不知道会不会出现冲突啊

骚一把

导入vue

在表单的父层div 加上id

给每个表单的子组件加上v-model进行双向数据绑定

 <input type="text" v-model="userName" name="userName" lay-verify="" placeholder="请输入用户名" autocomplete="off" class="layui-input">

在js中赋数据

//用vue双向绑定渲染表单

     let rua=new Vue({

    //div的id
      el:"#layuiadmin-form-admin",

      data:data//data:{}

    });