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

el-table 树形结构的多个 children 表单必填校验可以通过自定义校验函数来实现。具体步骤如下：

1. 在 el-table 中使用 scoped-slot 来自定义树形结构的渲染方式，同时添加表单元素，并绑定 v-model。

2. 在 el-form 中添加自定义校验函数，函数的参数为表单数据和校验规则，函数的返回值为布尔值，表示校验结果。

3. 在表单元素上添加 :rules 属性，绑定校验规则，规则中调用自定义校验函数进行必填校验。

下面是一个示例代码：

<template>
  <div>
    <el-form :model="formData" :rules="rules" ref="form">
      <el-table :data="tableData" :row-key="row => row.id" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form-item label="子节点1" prop="child1">
              <el-input v-model="props.row.child1"></el-input>
            </el-form-item>
            <el-form-item label="子节点2" prop="child2">
              <el-input v-model="props.row.child2"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
      </el-table>
    </el-form>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '节点1',
          child1: '',
          child2: '',
          children: [
            {
              id: 11,
              name: '子节点1-1',
              child1: '',
              child2: ''
            },
            {
              id: 12,
              name: '子节点1-2',
              child1: '',
              child2: ''
            }
          ]
        },
        {
          id: 2,
          name: '节点2',
          child1: '',
          child2: '',
          children: [
            {
              id: 21,
              name: '子节点2-1',
              child1: '',
              child2: ''
            },
            {
              id: 22,
              name: '子节点2-2',
              child1: '',
              child2: ''
            }
          ]
        }
      ],
      formData: {},
      rules: {
        child1: [
          { required: true, message: '子节点1不能为空', trigger: 'blur' },
          { validator: this.validateChild1, trigger: 'blur' }
        ],
        child2: [
          { required: true, message: '子节点2不能为空', trigger: 'blur' },
          { validator: this.validateChild2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validateChild1(rule, value, callback) {
      if (value === '') {
        callback(new Error('子节点1不能为空'))
      } else {
        callback()
      }
    },
    validateChild2(rule, value, callback) {
      if (value === '') {
        callback(new Error('子节点2不能为空'))
      } else {
        callback()
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 校验通过，提交表单数据
        } else {
          // 校验不通过，提示错误信息
        }
      })
    }
  }
}
</script>

在上述示例代码中，首先使用 el-table 的 scoped-slot 来自定义树形结构的渲染方式，并在树形结构中添加了两个表单元素 child1 和 child2，并绑定了 v-model。

接着在 el-form 中添加了自定义校验函数 validateChild1 和 validateChild2，并在 rules 中绑定了校验规则，规则中调用自定义校验函数进行必填校验。

最后在 el-form 上调用 validate 方法进行表单校验，校验通过后提交表单数据，校验不通过则提示错误信息