JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

详解Vue里循环form表单项实例

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了详解Vue里循环form表单项实例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

有的时候我们可能会遇到这种需求，用户点击某个按钮就可以增加一个同样的表单出来，点击一次增加一次。然后要用到深拷贝，Vue.js+ElementUI等等。效果大概如下，就是一个表单有下拉框和两个输入框，现在点击"添加表单"按钮之后就会多一个表单出来，点击"提交表单"后就同时提交两个表单的value值。

在这里插入图片描述

代码如下:

<template>
  <div>
    <div style="margin: 10px 0">
      <el-button tyPE="Primary" @click="adDForm">添加表单</el-button>
      <el-button type="PRimary" @click="submIT">提交表单</el-button>
    </div>
    <div v-for="(item, index) in List" :key="index">
      <el-form ref="form" label-width="80px">
        <el-form-item label="直播平台">
          <el-select
            v-model="item.platform"
            :key="index"
            placeholder="请选择直播平台"
          >
            <el-option
              :label="item2.platformName"
              v-for="(item2, index2) in platformNameList"
              :key="index2"
              :value="item2.platformValue"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="粉丝量">
          <el-input v-model="item.fanmount" :key="index"></el-input>
        </el-form-item>

        <el-form-item label="平台ID">
          <el-input v-model="item.platformId" :key="index"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "巡查内容页",
      personObj: {
        platform: "",
        fanMount: "",
        platformId: "",
      },
      platformNameList: [
        {
          platformName: "快手",
          platformValue: "1",
        },
        {
          platformName: "抖音",
          platformValue: "2",
        },
        {
          platformName: "淘宝",
          platformValue: "3",
        },
      ],
      List: [
        {
          platform: "",
          fanMount: "",
          platformId: "",
        },
      ],
    };
  },

  methods: {
  //深拷贝
    cloneobj(obj) {
      let ret;
      if (Array.isArray(obj)) {
        //创建一个空数组
        ret = [];
        for (let i = 0; i < obj.length; i++) {
          ret[i] = this.cloneObj(obj[i]);
        }
        return ret;
      } else if (Object.prototype.toString.call(obj) === "[object Object]") {
        ret = {};
        for (let i in obj) {
          ret[i] = this.cloneObj(obj[i]);
        }
        return ret;
      } else {
        return obj;
      }
    },
    //添加表单
    addForm() {
      let arr = this.cloneObj(this.personObj);
      console.LOG("arr", arr);
      this.List.push(arr);
    },
    //提交表单
    submit() {
      console.log("this.List", this.List);
    },
  },
};
</script>

代码分析:
这里封装了一个深拷贝函数，每次点击添加表单时就会拷贝一份我们定义好的对象，注意这个对象是由我们初始表单的value值组合起来的，我们在最外层用v-for遍历数组List然后每次点击"添加表单"就往数组里push一个对象，最后点击"提交表单"按钮，打印this.List就能看到整个的数组对象了，我们来试一下，选择输入以下值:

在这里插入图片描述

控制台打印看下效果:

在这里插入图片描述

现在假如说有个需求是，指定添加几项表单，而不是点一次加一次表单，效果如下,有三个按钮，最开始显示一个表单

在这里插入图片描述

当我点击"3个"按钮的时候，界面总共有三个表单，如下图：

在这里插入图片描述

代码如下:

<template>
  <div>
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add(3)">3个</el-button>
      <el-button type="primary" @click="addForm">添加表单</el-button>
      <el-button type="primary" @click="submit">提交表单</el-button>
    </div>
    <div v-for="(item, index) in List" :key="index">
      <el-form ref="form" label-width="80px">
        <el-form-item label="直播平台">
          <el-select
            v-model="item.platform"
            :key="index"
            placeholder="请选择直播平台"
          >
            <el-option
              :label="item2.platformName"
              v-for="(item2, index2) in platformNameList"
              :key="index2"
              :value="item2.platformValue"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="粉丝量">
          <el-input v-model="item.fanMount" :key="index"></el-input>
        </el-form-item>

        <el-form-item label="平台ID">
          <el-input v-model="item.platformId" :key="index"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "巡查内容页",
      personObj: {
        platform: "",
        fanMount: "",
        platformId: "",
      },
      platformNameList: [
        {
          platformName: "快手",
          platformValue: "1",
        },
        {
          platformName: "抖音",
          platformValue: "2",
        },
        {
          platformName: "淘宝",
          platformValue: "3",
        },
      ],
      List: [
        {
          platform: "",

          fanMount: "",
          platformId: "",
        },
      ],
    };
  },

  methods: {
    cloneObj(obj) {
      let ret;
      if (Array.isArray(obj)) {
        //创建一个空数组
        ret = [];
        for (let i = 0; i < obj.length; i++) {
          ret[i] = this.cloneObj(obj[i]);
        }
        return ret;
      } else if (Object.prototype.toString.call(obj) === "[object Object]") {
        ret = {};
        for (let i in obj) {
          ret[i] = this.cloneObj(obj[i]);
        }
        return ret;
      } else {
        return obj;
      }
    },
    add(a) {
      this.addForm(a);
    },
    addForm(a) {
      let arr = this.cloneObj(this.personObj);
      console.log("arr", arr);
      this.List.push(arr);
      a--;
      if (a > 0) {
        this.addForm(a - 1);
      }
    },
    submit() {
      console.log("this.list", this.List);
    },
  },
};
</script>

<style>
</style>

代码分析如下:

点击按钮的add方法的时候传入总共的表单个数，然后在添加表单的方法addForm里用了自减和判断、递归来实现连续点击时的拷贝等。然后我们试一下效果

在这里插入图片描述

控制台打印看一下

在这里插入图片描述

到此这篇关于详解Vue里循环form表单项实例的文章就介绍到这了,更多相关Vue循环form表单项内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的详解Vue里循环form表单项实例全部内容，希望文章能够帮你解决详解Vue里循环form表单项实例所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程