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

最新推荐文章于 2024-08-26 10:27:22 发布

神探小白牙

最新推荐文章于 2024-08-26 10:27:22 发布

阅读量1w

点赞数 6

分类专栏： vue element 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/anny_mei/article/details/103909176

版权

vue 同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

element

33 篇文章 0 订阅

订阅专栏

在这里插入图片描述

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

<el-tab-pane label="工作经历" name="four">
          <template>
            <div>
              <el-form
                :model="formData3"
                label-width="80px"
                ref="formData3"
                class="dataForm workForm"
              >
                <el-row
                  v-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-picker
                        placeholder="选择日期"
                        :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-picker
                        placeholder="选择日期"
                        :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-button
                    type="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)
    },