VUE动态新增表单&对表单进行校验

1、html

<el-tabs
            v-model="editableTabsValue"
            type="card"
            closable
            @tab-remove="removeDispatchFn"
            @tab-click="clickDispatchFn"
          >
            <el-tab-pane
              v-for="(item, index) in dispatchForm.moreNotifyObject"
              :key="item.name"
              :name="item.name"
            >
              <div class="dispatchRulesIn">
                <el-col :lg="24">
                  <el-form-item
                    label="执法大队:"
                    :prop="'moreNotifyObject.' + index +'.enforceTeam'"
                    :rules="rules.enforceTeam"
                  >
                    <el-input v-model="item.enforceTeam" placeholder="请输入执法大队" />
                  </el-form-item>
                </el-col>
                <el-col :lg="24">
                  <el-form-item
                    label="执法人:"
                    :prop="'moreNotifyObject.'+ index +'.enforceName'"
                    :rules="rules.enforceName"
                  >
                    <el-input v-model="item.enforceName" placeholder="请输入执法人姓名" />
                  </el-form-item>
                </el-col>
                <el-col :lg="24">
                  <el-form-item label="联系电话:" :prop="'moreNotifyObject.'+ index +'.phone'" :rules="rules.phone">
                    <el-input v-model="item.phone" placeholder="请输入执法人联系电话" />
                  </el-form-item>
                </el-col>
              </div>
            </el-tab-pane>
          </el-tabs>

2、JS&逻辑

dispatchForm: {
  moreNotifyObject: [{
    enforceTeam: '',
    enforceName: '',
    phone: '',
    name: '0'
  }]
},

      // 验证
rules: {
  enforceTeam: [{ required: true, message: '请输入执法大队', trigger: 'change' }],
  enforceName: [{ required: true, message: '请输入执法人', trigger: 'change' }],
},
//动态新增按钮
 addDispatchFn(targetName) {
    const newTabName = ++this.tabIndex + ''
    this.dispatchForm.moreNotifyObject.push({
      enforceTeam: '',
      enforceName: '',
      phone: '',
      name: newTabName
    })
  },