Element UI el-table 树形结构中多个 children 表单的必填校验

要对 el-table 树形结构中多个 children 表单进行必填校验，可以使用以下步骤：

1. 定义一个变量用于保存校验结果：

let validateResult = true;

2. 在 el-table 的 row-template 中，给每个 children 表单添加 ref 属性：

<el-table :data="tableData" row-key="id" :tree-props="{children: 'children'}">
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
  <el-table-column prop="children" label="Children">
    <template slot-scope="scope">
      <el-form :ref="'form-' + scope.row.id" :model="scope.row" :rules="rules">
        <el-form-item label="Name" prop="name">
          <el-input v-model="scope.row.name"></el-input>
        </el-form-item>
        <el-form-item label="Age" prop="age">
          <el-input v-model.number="scope.row.age"></el-input>
        </el-form-item>
      </el-form>
    </template>
  </el-table-column>
</el-table>

3. 在提交表单的方法中，遍历每个 children 表单进行校验，如果有任一表单校验不通过，则将校验结果变量设置为 false：

submitForm() {
  this.tableData.forEach(row => {
    const form = this.$refs['form-' + row.id];
    form.validate(valid => {
      if (!valid) {
        validateResult = false;
      }
    });
  });
  if (validateResult) {
    // 校验通过，提交表单
  }
}

4. 在每次提交表单前，将校验结果变量重置为 true：

beforeSubmit() {
  validateResult = true;
}

完整代码示例：

<template>
  <div>
    <el-table :data="tableData" row-key="id" :tree-props="{children: 'children'}">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="children" label="Children">
        <template slot-scope="scope">
          <el-form :ref="'form-' + scope.row.id" :model="scope.row" :rules="rules">
            <el-form-item label="Name" prop="name">
              <el-input v-model="scope.row.name"></el-input>
            </el-form-item>
            <el-form-item label="Age" prop="age">
              <el-input v-model.number="scope.row.age"></el-input>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="beforeSubmit()">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: 'John',
          age: 30,
          children: [
            {
              id: 2,
              name: 'Jane',
              age: 20,
              children: []
            }
          ]
        },
        {
          id: 3,
          name: 'Mike',
          age: 40,
          children: [
            {
              id: 4,
              name: '',
              age: 10,
              children: []
            },
            {
              id: 5,
              name: 'Mary',
              age: null,
              children: []
            }
          ]
        }
      ],
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    beforeSubmit() {
      let validateResult = true;
      this.tableData.forEach(row => {
        const form = this.$refs['form-' + row.id];
        form.validate(valid => {
          if (!valid) {
            validateResult = false;
          }
        });
      });
      if (validateResult) {
        // 校验通过，提交表单
      }
    }
  }
};
</script>