el-table多层级表单验证

在Element UI的`el-table`组件中，处理多级表格的表单验证通常涉及到以下几个步骤：

1. **数据组织**：首先，确保表格的数据结构清晰，每行数据对应一个对象，包含所有子级字段，可能是嵌套的对象数组。

{
  id: '',
  parentField: '',
  // 可能还有多个子级字段
  childFields: [
    {
      subField1: '',
      subField2: ''
    },
    {
      // 更多子级...
    }
  ]
}

2. **绑定表单模型**：给每个表格行的数据创建对应的表单域，并将其绑定到表单模型中。你可以使用v-model指令或者ref属性来实现双向数据绑定。

<template>
  <el-form :model="form">
    <el-table :data="tableData" @row-click="selectRow">
      <!-- 每一行的表单验证 -->
      <el-row :key="item.id" v-for="(item, index) in tableData">
        <el-col>
          <el-form-item label="父字段">
            <el-input v-model="form[parentFieldKey][index]" />
          </el-form-item>
          <!-- 验证childFields的每一个子项 -->
          <el-form-item v-for="subItem in item.childFields" :key="subItem.subField1">
            <el-input v-model="form[parentFieldKey][index].subItem[subItemKey]" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-table>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      tableData: [],
      parentFieldKey: 'parentField',
      subItemKey: 'subField1'
    };
  }
};
</script>

3. **自定义验证规则**：对于复杂的验证需求，可以在Vue实例中定义一个全局的验证方法，然后在`el-form-item`中引用这个方法，比如使用`validateField`。

4. **监听表单事件**：监听`el-form`的`validate`或`onValidate`事件，对整个表格数据进行整体验证。

5. **显示错误消息**：在`el-form-item`的`:error`属性上展示验证失败的消息，或者利用`el-message`组件提示用户。