Element 表单嵌套树形表格校验问题 - 代码实现和解决方案

首先，需要在HTML中设置好树形表格和Element表单的结构。树形表格可以使用Vue.js和Element UI的el-tree组件，表单可以使用el-form组件。示例代码如下：

<template>
  <div>
    <el-tree :data='treeData' :props='treeProps' ref='tree'></el-tree>
    <el-form ref='form' :model='form' :rules='rules' label-width='100px' style='margin-top: 20px;'>
      <el-form-item label='名称' prop='name'>
        <el-input v-model='form.name'></el-input>
      </el-form-item>
      <el-form-item label='年龄' prop='age'>
        <el-input v-model.number='form.age'></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type='primary' @click='submitForm'>提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [{
        label: '父节点 1',
        children: [{
          label: '子节点 1-1'
        }, {
          label: '子节点 1-2'
        }]
      }, {
        label: '父节点 2',
        children: [{
          label: '子节点 2-1'
        }, {
          label: '子节点 2-2'
        }]
      }],
      treeProps: {
        label: 'label',
        children: 'children'
      },
      form: {
        name: '',
        age: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }],
        age: [{
          required: true,
          message: '请输入年龄',
          trigger: 'blur'
        }, {
          type: 'number',
          message: '年龄必须是数字值',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('提交成功')
        } else {
          alert('表单校验不通过')
          return false
        }
      })
    }
  }
}
</script>

接下来，需要实现校验逻辑。由于树形表格可能有多层嵌套，需要递归遍历树形表格中的所有节点，对每个节点进行表单校验。在校验过程中，需要注意以下问题：

1. 对于每个节点，需要根据表单数据中的名称属性（如'name'）动态生成对应的校验规则，以保证每个节点的名称都是唯一的；
2. 对于每个节点，需要根据表单数据中的年龄属性（如'age'）动态生成对应的校验规则，以保证每个节点的年龄都符合要求；
3. 对于每个节点，需要递归遍历其所有子节点，并对每个子节点执行相同的校验逻辑。

示例代码如下：

methods: {
  validateNodeData(node, rules) {
    // 遍历子节点
    if (node.children && node.children.length > 0) {
      node.children.forEach(childNode => {
        this.validateNodeData(childNode, rules)
      })
    }
    // 校验名称
    let nameProp = 'name_' + node.id // 动态生成名称属性
    let nameRules = [{
      required: true,
      message: '请输入名称',
      trigger: 'blur'
    }]
    rules[nameProp] = nameRules
    // 校验年龄
    let ageProp = 'age_' + node.id // 动态生成年龄属性
    let ageRules = [{
      required: true,
      message: '请输入年龄',
      trigger: 'blur'
    }, {
      type: 'number',
      message: '年龄必须是数字值',
      trigger: 'blur'
    }]
    rules[ageProp] = ageRules
  },
  submitForm() {
    // 生成校验规则
    let rules = {}
    this.treeData.forEach(node => {
      this.validateNodeData(node, rules)
    })
    // 执行表单校验
    this.$refs.form.validate((valid) => {
      if (valid) {
        alert('提交成功')
      } else {
        alert('表单校验不通过')
        return false
      }
    })
  }
}

最后要注意的是，需要在表单的el-form-item组件中使用动态的prop属性来绑定校验规则。示例代码如下：

<el-form-item :prop=''name_' + node.id' label='名称'>
  <el-input v-model='node.name'></el-input>
</el-form-item>
<el-form-item :prop=''age_' + node.id' label='年龄'>
  <el-input v-model.number='node.age'></el-input>
</el-form-item>