vue2+element ui实现动态表单,点击按钮增删一排输入框,并进行表单校验

结构部分： 先写第一行的4个表单元素； 后面通过增加按钮生成的几行通过表单中一个数组来控制； 每次新增都往这个数组中添加一行表单数据；

<template>
  <div>
    <el-form ref="form" :rules="formRules" :inline="true" :model="form" label-width="80px">
      <el-form-item label="字段1" prop="one">
        <el-select v-model="form.one" clearable style="width: 100px">
          <el-option v-for="item in oneList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="字段2" prop="two">
        <el-select v-model="form.two" clearable style="width: 100px" >
          <el-option v-for="item in twoList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="字段3:" prop="three1">
        <div v-if='form.two=="200"'>
          <el-select v-model="form.three1" clearable style="width: 100px">
            <el-option v-for="item in threeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          -
          <el-input ref='three2' v-model="form.three2" placeholder="请输入" clearable style="width: 100px" />
        </div>
        <div v-else>
          <el-input v-model="form.three1" placeholder="请输入" clearable style="width: 100px" />
          -
          <el-input ref='three2' v-model="form.three2" placeholder="请输入" clearable style="width: 100px" />
        </div>
      </el-form-item>
      <el-form-item label="字段4:" prop="four">
        <el-input v-model="form.four" placeholder="请输入" clearable style="width: 100px" />
      </el-form-item>

      <el-button @click="addItem" type="primary">增加</el-button>
      <div v-for="(formitem, index) in form.dynamicItem" :key="index">
        <el-form-item label="字段1" :prop="'dynamicItem.' + index + '.one'" :rules="{
            required: true, message: '不能为空', trigger: 'blur'
        }">
          <el-select v-model="formitem.one" clearable style="width: 100px">
            <el-option v-for="item in oneList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="字段2" :prop="'dynamicItem.' + index + '.two'" :rules="{
            required: true, message: '不能为空', trigger: 'blur'
          }">
          <el-select v-model="formitem.two" clearable style="width: 100px">
            <el-option v-for="item in twoList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="字段3:" :prop="'dynamicItem.' + index + '.three1'" :rules="{
            required: true, message: '不能为空',validator: checkOvertime1, trigger: 'blur',index:index
          }">
          <div v-if='formitem.two=="200"'>
            <el-select v-model="formitem.three1" clearable style="width: 100px">
              <el-option v-for="item in threeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            -
            <el-input ref="sthree2" v-model="formitem.three2" placeholder="请输入" clearable style="width: 100px" />
          </div>
          <div v-else>
            <el-input v-model="formitem.three1" placeholder="请输入" clearable style="width: 100px" />
            -
            <el-input ref="sthree2" v-model="formitem.three2" placeholder="请输入" clearable style="width: 100px" />
          </div>
        </el-form-item>
        <el-form-item label="字段4:" :prop="'dynamicItem.' + index + '.four'" :rules="{
            required: true, message: '不能为空', trigger: 'blur'
          }">
          <el-input v-model="formitem.four" placeholder="请输入" clearable style="width: 100px" />
        </el-form-item>
        <el-form-item>
          <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
        </el-form-item>
     
      </div>
	     <!-- <el-form-item style="margin-left:10px" size="large">
          <el-button type="primary" @click="submitForm">保存</el-button>
        </el-form-item> -->
    </el-form>
  </div>
</template>

export default {
  data() {
    return {
      form: {
        one: '',
        two: '',
        three1: '',
        three2: '',
        four: '',
        dynamicItem: []
      },
      isShow: false,
      oneList: [
        {
          label: "内容1",
          value: "100"
        }
      ],
      twoList: [
        {
          label: "内容1",
          value: "200"
        },
        {
          label: "内容2",
          value: "201"
        }
      ],
      threeList: [],
      formRules: {
        one: [{ required: true, message: '请输入', trigger: 'blur' }],
        two: [{ required: true, message: '请输入', trigger: 'blur' }],
        three1: [{ required: true, validator: this.checkOvertime, message: '请输入', trigger: 'blur' }],
        four: [{ required: true, message: '请输入', trigger: 'blur' }],
      }
    }
  },
  methods: {
    // 用于同时验证第一行字段3的两个框
    checkOvertime(rule, value, callback) {

      let three2 = this.$refs.three2.value;
      console.log(three2);

      if (value && three2) {
        callback()
      } else {
        if (!value) {
          callback(new Error('请输入'))
        }
        if (!three2) {
          callback(new Error('请输入'))
        }
      }
    },
	 // 用于同时验证后面几行字段3的两个框
    checkOvertime1(rule, value, callback) {

      let three2 = this.$refs.sthree2[rule.index].value;
      console.log(three2);

      if (value && three2) {
        callback()
      } else {
        if (!value) {
          callback(new Error('请输入'))
        }
        if (!three2) {
          callback(new Error('请输入'))
        }
      }
    },
  
    addItem() {
      this.form.dynamicItem.push({
        one: '',
        two: '',
        three1: '',
        three2: '',
        four: '',
      })
    },
    deleteItem(item, index) {
      this.form.dynamicItem.splice(index, 1)
    },
  }
}