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-inputv-model.trim="data.link"placeholder="输入内容"size="mini"clearable/></div></el-col></el-row><!-- 添加按钮 --><el-row:gutter="20" ><el-col :span="3"><divclass="item-title"@click = "addShareLink"><i class="el-icon-circle-plus"/></div></el-col></el-row><!-- 动态添加参数 --><el-rowv-for="(todo,index) in shareParams":key="index"><el-row :gutter="20"><el-col :span="3"><divclass="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-inputv-model.trim="todoObj[todo.value]"placeholder="输入内容"size="mini"clearable/></el-col><el-col :span="3"><el-selectv-model="todoObj[todo.type]"placeholder="请选择类型"><el-optionv-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=非必填

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

vue动态生成表单元素基础篇相关推荐

vue动态生成表单元素
前几天接了一个需求,需要动态生成一个表单数据,然后提交,提交完数据后.通过编辑按钮进入时,需要进行数据回填. 一.页面展示: I. 没生成表单前的状态 Vue-UEedit UEedit II. 单机 ...
表单组件 form fastadmin（生成表单元素）
Form组件定义文件位置: /extend/fast/Formphp 通用参数 $name 通常为我们组件的名称(name属性值),我们在后台接收时可以通过这个名称来获取到它所对应的值 $value ...
vue 根据字符串生成表单_vue自定义表单生成器,可根据json参数动态生成表单
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...
没有form的表单验证_PHP动态生成表单，内置17种常用组件并且支持表单验证！
FormBuilder 是一个开源的PHP表单生成器,可以快速生成现代化的form表单.还可以配合开源项目 xaboy/form-create 生成任何 Vue 组件 github | 文档环境需求 ...
layui追加或动态修改表单元素不生效
转自:https://blog.csdn.net/qq_29712303/article/details/80030757 在layui的post中请求后台,获取数据,数据获取后修改html页面中内容 ...
antd design mobile +react 动态生成表单
项目场景: 通过后台获取到数据,在页面动态渲染生成表单问题描述因为业务需求,我们从后台获取的数据有多层嵌套,数据结构为数组-对象-数组,第一层比较简单就能渲染出来,要注意的点是对表单的类型进行判断 ...
问卷调查：vue element动态生成表单、表单校验以及表单提交
有任何疑问和问题欢迎大家提出来,一起学习,相互监督,共同进步! 需求:题型包含:单选题.多选题.文本框.矩阵题型实现功能的相关技术:vue(router,axios,element-ui) 实现结果 ...
layui -- autoForm 模块(动态生成表单,非官网模块)
动态生成form表单的需求可用, formTemplate.html 和 autuform.js 在同级目录 ,使用方式如下创建 autoform文件夹 formTemplate.html 和 au ...
vue --- 基本的表单元素
<template> <div>input: <input type='text' v-model='input_value' />,输入的值: {{input_v ...

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

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

vue动态生成表单元素基础篇相关推荐

最新文章

热门文章