vue动态生成表单元素基础篇

这里讲解一个vue生成表单的简单实例：

（图一）

（图二）

（图三）

---

如上图所示：

• 图一： 空的输入框的情况
• 图二： 点击 “+” 添加生成表单的情况
• 图三： 表单中可以输入值，并且可以点击“—”删除和点击“+”添加

---

View层

          <el-row
            :gutter="20" >
            <el-col :span="3">
              <div class="item-title"><span class="text-red">*</span> 分享链接:</div>
            </el-col>
            <el-col :span="5">
              <div class="item-msg">
                <el-input
                  v-model.trim="data.link"
                  placeholder="输入内容"
                  size="mini"
                  clearable/>
              </div>
            </el-col>
          </el-row>
          
          <!-- 添加按钮 -->
          
          <el-row
            :gutter="20" >
            <el-col :span="3">
              <div
                class="item-title"
                @click = "addShareLink"><i class="el-icon-circle-plus"/></div>
            </el-col>
          </el-row>
          
          <!-- 动态添加参数 -->
        
            <el-row
              v-for="(todo,index) in shareParams"
              :key="index">
              <el-row :gutter="20">
                <el-col :span="3">
                  <div
                    class="item-title"
                    @click = "removeParam(index)"><i class="el-icon-remove"/>
                  </div>
                </el-col>
                <el-col
                  :span="1"
                  style="margin-top:10px;margin-right:20px;">
                  参数:
                </el-col>
                <el-col
                  :span="3"
                  style="margin-left: -38px;">
                  <el-input
                    v-model.trim="todoObj[todo.value]"
                    placeholder="输入内容"
                    size="mini"
                    clearable/>
                </el-col>
                <el-col :span="3">
                  <el-select
                    v-model="todoObj[todo.type]"
                    placeholder="请选择类型">
                    <el-option
                      v-for="(item, index) in choose"
                      :key="index"
                      :label="item.label"
                      :value="item.value"/>
                  </el-select>
                </el-col>
              </el-row>
            </el-row>

---

JS层

export default {
	methods: {
          // 添加分享链接参数
	    addShareLink() {
	      this.index += 1;
	      this.shareParams.push({
	        id: this.index,
	        value: `link${this.index}`,
	        type: `type${this.index}`
	      });
	    },
	      // 删除分享参数
	    removeParam(index) {
             this.shareParams.splice(index, 1);
          },
	}，
	data() {
	    return {
	       index：0,
	       shareParams: [],
	       todoObj: {},
	       data: {
	        link: ""
	      }
	   }
	 }
 }

上面是对数据生成的处理，但是如果按照我中思路处理，最后提交是一个问题，所以在这里我要在写一个提交时数据格式化的函数：

    //提交的时候调用formatURL传入上面定义的 todoObj进行格式化
    
    formatURL(obj) {
      let url = "";
      const tempArr = [];
      const arr = Object.keys(obj);
      let leng = 0;
      arr.map(item => {
        if (item.slice(-1) * 1 > leng) {
          leng = item.slice(-1) * 1;
        }
      });
      for (let i = 1; i <= leng; i += 1) {
        const obj1key = arr.filter(item => item.slice(-1) * 1 === i);
        const obj1 = {};
        obj1key.map(item => {
          obj1[item] = obj[item];
        });
        tempArr.push(obj1);
      }
      tempArr.forEach(v => {
        Object.keys(v).map(key => {
          url += `${key}=${v[key]}&`;
        });
      });
      url = url.substring(0, url.length - 1);
      return `${this.data.link}?${url}`;
    },

最后转换的格式为：

    234567878888？type1=热热&link1=必填&type2=热热&link2=非必填&type3=热女&link2=非必填

上面是一个动态生层表单元素的基本形式，该代码可以直接移至到自己的项目中。