vue表单嵌套表格实现逐行增加并校验

实现效果：

 html

        <el-dialog :visible="confereeshow" @close="confereeshow = false">
          <div style="margin-bottom: 15px;">
            <el-button @click="add">新增</el-button>
            <el-button @click="upload.importVisible = true">导入</el-button>
            <el-button :disabled="addform.confereeList.length < 1" @click="handleExport">导出</el-button>
            <el-button @click="delPeople()">删除</el-button>
          </div>
          <!-- 参会人员 -->
          <el-form ref="addform" :model="addform" label-width="140px" :rules="addform.rules">
            <el-table :data="addform.confereeList" @selection-change="handleSelectionChange">
              <el-table-column type="selection" align="center" />
              <el-table-column label="姓名" align="center" prop="name">
                <template slot-scope="{row,$index}">
                  <el-form-item v-if="row.show" :prop="'confereeList.'+$index+'.name'" :rules="addform.rules.name" label-width="0">
                    <el-input v-model="addform.confereeList[$index].name" />
                  </el-form-item>
                  <span v-else>{{ row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="职务" align="center" prop="duty">
                <template slot-scope="{row,$index}">
                  <el-form-item v-if="row.show" :prop="'confereeList.'+$index+'.duty'" :rules="addform.rules.duty" label-width="0">
                    <el-input v-model="addform.confereeList[$index].duty" />
                  </el-form-item>
                  <span v-else>{{ row.duty }}</span>
                </template>
              </el-table-column>
              <el-table-column label="工作单位" align="center" prop="workUnit">
                <template slot-scope="{row,$index}">
                  <el-form-item v-if="row.show" :prop="'confereeList.'+$index+'.workUnit'" label-width="0">
                    <el-input v-model="addform.confereeList[$index].workUnit" />
                  </el-form-item>
                  <span v-else>{{ row.workUnit }}</span>
                </template>
              </el-table-column>
              <el-table-column label="手机号" align="center" prop="phone">
                <template slot-scope="{row,$index}">
                  <el-form-item v-if="row.show" :prop="'confereeList.'+$index+'.phone'" :rules="addform.rules.phone" label-width="0">
                    <el-input v-model="addform.confereeList[$index].phone" />
                  </el-form-item>
                  <span v-else>{{ row.phone }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="{row,$index}">
                  <el-button
                    v-if="row.show"
                    type="text"
                    size="mini"
                    @click="save1(row,$index)"
                  >保存</el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click="deletePeople(row,$index)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-dialog>

其中要注意prop的绑定方式为:prop="'datas.'+scope.$index + '.name'"

以及数据源的结构为数组对象的形式

data

addform: {
        confereeList: [],
        rules: {
          name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          duty: [{ required: true, message: '请输入职务', trigger: 'blur' }],
          phone: [{ min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
            {
              pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
              // pattern: /^1[3456789]\d{9}$/,
              message: '请输入正确的手机号码'
            }
          ]
        }
      },

表单校验每个字段需要单独绑定
<el-form-item :prop="‘datas.’+scope.$index + ‘.name’" :rules='rules.name'>

表单校验部分如果校验只是对某些字段进行校验，其他的字段会输出error为undefined

//新增一行数据显示    
add() {
      this.obj = {
        name: '',
        duty: '',
        phone: '',
        workUnit: '',
        show: true,
        meetingId: this.currentRoomId
      }
      this.addform.confereeList.push(this.obj)
      // console.log(this.addform.confereeList)
    },    
// 对部分表单字段进行校验
    validateField(form, index) {
      let result = true
      for (const item of this.$refs[form].fields) {
        if (item.prop.split('.')[1] == index) {
          this.$refs[form].validateField(item.prop, (error) => {
            if (typeof error === 'undefined') {
              error = ''
            }
            if (error !== '') {
              result = false
            }
          })
        }
      }
      return result
    },

    async save1(row, index) {
      // this.$refs.addform.validate(async valid => {
      // if (valid) {
      const isValid = this.validateField('addform', index)
      if (isValid) {
        row.show = false
        try {
          addPeople(this.addform.confereeList[index]).then(({ message }) => {
            this.$message({
              type: 'success',
              message: message
            })
          })
          this.getPeople(this.currentRoomId)
          this.getList()
          // this.addDialog = false
        } catch (error) {

        }
      }

      // } else {
      //   return false
      // }
      // })
    },

 参考：vue+ElementUI 表单嵌套表格逐行校验（新增、编辑）的完美解决方案_iamlujingtao的博客-CSDN博客