快捷導(dǎo)航

詳解Vue里循環(huán)form表單項(xiàng)實(shí)例

更新時(shí)間：2021年09月08日 08:59:02 作者：廣漂的明哥

本文主要介紹了Vue里循環(huán)form表單項(xiàng)實(shí)例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

有的時(shí)候我們可能會(huì)遇到這種需求，用戶點(diǎn)擊某個(gè)按鈕就可以增加一個(gè)同樣的表單出來，點(diǎn)擊一次增加一次。然后要用到深拷貝，Vue.js+ElementUI等等。效果大概如下，就是一個(gè)表單有下拉框和兩個(gè)輸入框，現(xiàn)在點(diǎn)擊"添加表單"按鈕之后就會(huì)多一個(gè)表單出來，點(diǎn)擊"提交表單"后就同時(shí)提交兩個(gè)表單的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="直播平臺(tái)">
          <el-select
            v-model="item.platform"
            :key="index"
            placeholder="請(qǐng)選擇直播平臺(tái)"
          >
            <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="平臺(tái)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: "巡查內(nèi)容頁",
      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)) {
        //創(chuàng)建一個(gè)空數(shù)組
        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>

代碼分析:
這里封裝了一個(gè)深拷貝函數(shù)，每次點(diǎn)擊添加表單時(shí)就會(huì)拷貝一份我們定義好的對(duì)象，注意這個(gè)對(duì)象是由我們初始表單的value值組合起來的，我們?cè)谧钔鈱佑胿-for遍歷數(shù)組List然后每次點(diǎn)擊"添加表單"就往數(shù)組里push一個(gè)對(duì)象，最后點(diǎn)擊"提交表單"按鈕，打印this.List就能看到整個(gè)的數(shù)組對(duì)象了，我們來試一下，選擇輸入以下值:

在這里插入圖片描述

控制臺(tái)打印看下效果:

在這里插入圖片描述

現(xiàn)在假如說有個(gè)需求是，指定添加幾項(xiàng)表單，而不是點(diǎn)一次加一次表單，效果如下,有三個(gè)按鈕，最開始顯示一個(gè)表單

在這里插入圖片描述

當(dāng)我點(diǎn)擊"3個(gè)"按鈕的時(shí)候，界面總共有三個(gè)表單，如下圖：

在這里插入圖片描述

代碼如下:

<template>
  <div>
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add(3)">3個(gè)</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="直播平臺(tái)">
          <el-select
            v-model="item.platform"
            :key="index"
            placeholder="請(qǐng)選擇直播平臺(tái)"
          >
            <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="平臺(tái)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: "巡查內(nèi)容頁",
      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)) {
        //創(chuàng)建一個(gè)空數(shù)組
        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>

代碼分析如下:

點(diǎn)擊按鈕的add方法的時(shí)候傳入總共的表單個(gè)數(shù)，然后在添加表單的方法addForm里用了自減和判斷、遞歸來實(shí)現(xiàn)連續(xù)點(diǎn)擊時(shí)的拷貝等。然后我們?cè)囈幌滦Ч?br />

在這里插入圖片描述

控制臺(tái)打印看一下

在這里插入圖片描述

到此這篇關(guān)于詳解Vue里循環(huán)form表單項(xiàng)實(shí)例的文章就介紹到這了,更多相關(guān)Vue循環(huán)form表單項(xiàng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: