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

大家好，欢迎来到IT知识分享网。

这里讲解一个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=非必填

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