elementplus 表单嵌套表格 校验

如果您使用 Element Plus 表单嵌套表格，并且需要进行校验，可以使用以下步骤：

1. 在表格中定义需要校验的列，并设置验证规则。

2. 在表单中使用 el-table-column 组件来定义表格的列，同时设置 prop 属性为表格数据中的对应字段。

3. 在 el-table-column 组件中，使用 scoped slot 来定义表格单元格的内容，同时使用 el-form-item 组件来包裹表格单元格中的输入控件，以实现表格单元格中的输入控件校验。

4. 在 el-form 组件中使用 ref 属性来设置表单的引用名称，以便在提交表单时进行表单校验。

5. 在表单提交时，可以通过 this.$refs.form.validate() 方法来进行表单校验。

下面是一个使用 Element Plus 表单嵌套表格进行校验的示例代码：

<template>
  <el-form ref="form" :model="form" label-width="120px" rules="rules">
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名">
        <template #default="{ row }">
          <el-form-item :prop="'name' + row.id">
            <el-input v-model="row.name"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄">
        <template #default="{ row }">
          <el-form-item :prop="'age' + row.id">
            <el-input v-model="row.age"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        tableData: [
          { id: 1, name: '', age: '' },
          { id: 2, name: '', age: '' }
        ]
      },
      rules: {
        tableData: [
          { type: 'array', required: true, message: '请至少添加一条记录' },
          {
            validator: (rule, value, callback) => {
              for (let i = 0; i < value.length; i++) {
                const row = value[i]
                const nameProp = `name${row.id}`
                const ageProp = `age${row.id}`
                this.$refs.form.validateField(nameProp, error => {
                  if (error) {
                    callback(error)
                  } else {
                    this.$refs.form.validateField(ageProp, error => {
                      if (error) {
                        callback(error)
                      } else {
                        callback()
                      }
                    })
                  }
                })
              }
            },
            trigger: 'submit'
          }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('表单校验通过')
        } else {
          console.log('表单校验失败')
        }
      })
    }
  }
}
</script>

在这个示例代码中，我们定义了一个包含两列（姓名和年龄）的表格，同时设置了每行数据的校验规则。在表格单元格中，我们使用了 el-form-item 组件来包裹输入控件，并且在 el-form 组件中设置了引用名称为 form，以便在提交表单时进行校验。在表单提交时，我们通过调用 this.$refs.form.validate() 方法来进行表单校验。