vue 动态添加表单,新增表格

当点击新增工作经历时,动态新增表单,并且可以点击删除当当前表单
新增的数据要以对象的形式push到数组里面去,我这里没有写校验规则会简单一些

<el-tab-pane label="工作经历" name="four"><template><div><el-form:model="formData3"label-width="80px"ref="formData3"class="dataForm workForm"><el-rowv-for="(item,index) in formData3.powerAttrList":key="index"style="border-bottom: 1px solid #f0f0f0;padding: 10px;"><el-form-item label="开始日期" :prop="'powerAttrList.' + index + '.time'":rules="[  {required: true,message: '请选择日期',trigger: 'change',},]"><el-col :span="11"><el-date-pickerplaceholder="选择日期":picker-options="pickerOptions"v-model="item.start_time"type="date"style="width: 109%;"value-format="timestamp"></el-date-picker></el-col></el-form-item><el-form-item label="结束日期" :prop="'powerAttrList.' + index + '.time'" :rules="[  {required: true,message: '请选择结束日期',trigger: 'change',},]"><el-col :span="11"><el-date-pickerplaceholder="选择日期":picker-options="pickerOptions"v-model="item.end_time"type="date"style="width: 109%;"value-format="timestamp"></el-date-picker></el-col></el-form-item><el-form-item label="单位名称" :prop="'powerAttrList.' + index + '.corp'"><el-input v-model="item.corp" /></el-form-item><el-form-item label="职位" :prop="'powerAttrList.' + index + '.position'"><el-input v-model="item.position" /></el-form-item><el-form-item label="证明人电话" :prop="'powerAttrList.' + index + '.contact'"><el-input v-model="item.contact" /></el-form-item><el-buttontype="danger"v-if="formData3.powerAttrList.length > 1"size="small"plain@click="removeRow(index)">删除</el-button></el-row><el-form-item class="newWork"><el-button size="small" @click="addWork">新增工作经历</el-button><el-button type="primary" @click="workOnSubmit" size="small">保存</el-button><el-button @click="back" size="small">返回</el-button></el-form-item></el-form></div></template></el-tab-pane>

data里面定义数据

      formData3: {powerAttrList: [{start_time: '',end_time: '',corp: '',position: '',contact: ''}]},workForm: {start_time: '',end_time: '',corp: '',position: '',contact: ''},

methods里面定义方法

 // 增加工作经历addWork() {this.formData3.powerAttrList.push({start_time: '',end_time: '',corp: '',position: '',contact: ''})},// 删除属性列removeRow(index) {this.formData3.powerAttrList.splice(index, 1)},

vue 动态添加表单,新增表格相关推荐

vue实现动态添加表单
前言日常开发中,动态添加表单的场景还是蛮多的,可能第一次听到动态添加表单的同学会有一点懵,但其实实现起来还是很简单的,下面一起来看看吧. 实现思路当我们点击 "新增车辆信息" ...
antd 动态添加表单_ZooTeam 拍了拍你，来看看如何设计动态化表单
? 这是第 58篇不掺水的原创,想要了解更多,请戳上方蓝色字体:政采云前端团队关注我们吧- 本文首发于政采云前端团队博客:ZooTeam 拍了拍你,来看看如何设计动态化表单 https://www.z ...
vue动态生成表单元素基础篇
这里讲解一个vue生成表单的简单实例: (图一) (图二) (图三) 如上图所示: 图一: 空的输入框的情况图二: 点击 "+" 添加生成表单的情况图三: 表单中可以输入值,并 ...
vue动态生成表单元素
前几天接了一个需求,需要动态生成一个表单数据,然后提交,提交完数据后.通过编辑按钮进入时,需要进行数据回填. 一.页面展示: I. 没生成表单前的状态 Vue-UEedit UEedit II. 单机 ...
html5表单动态添加,js动态添加表单实例
前段时间因为域名关系网站停了一段时间.别的不多说了,我前端结合php做一个批量建栏目的模块,用到这个对了下点,这个添加input动态添加 name也是可设成不同有,我用的是"text&qu ...
vue动态form表单实现
你只管复制粘贴,剩下交给代码(通过自己需求改代码) <!DOCTYPE html> <html lang="en"><head><meta ...
antd 动态添加表单_react Ant Design 动态生成表单，并带验证
写点杂记,写这个文章原因是因为我对象要做这个功能,我们正好用到了特意拆写成了1个简单的demo import React, {Component} from 'react' import {conne ...
html实现动态多表单输入,提交多个动态添加的html表单
我正在构建一个可以动态添加表单的功能.不是表单字段,而是一个完整的单独的HTML表单.提交多个动态添加的html表单我使用JS添加它们. add_email_template $('#add_ema ...
vue中添加附件以及表单内表格动态添加的功能实现
vue前端表单自动生成地址 form-generator vue中添加附件以及表单内表格动态添加的功能实现页面展示 <el-col :span="12"><el ...
vue element-ui自定义表头，动态添加表头，新增行、新增列、删除行、删除列
vue element-ui表格怎样自定义表头,动态添加表头,新增行.新增列.删除行.删除列需求描述 1.自定义表头,表头里插入输入框 2.默认初始化几行几列占位 3.新增行 4.新增列 5.右键点 ...

vue 动态添加表单,新增表格

vue 动态添加表单,新增表格相关推荐

最新文章

热门文章