Element表单嵌套树型表格 多层级无法校验rules

对于 Element 表单嵌套树型表格的多层级无法校验 rules 的问题，可以考虑以下解决方案：

1. 自定义校验函数

可以编写自定义的校验函数来对多层级表格进行校验。具体步骤如下：

• 在表单中引入自定义校验函数。
• 在树型表格中定义校验规则，调用自定义校验函数。
• 在自定义校验函数中对表格数据进行递归校验，返回校验结果。

示例代码如下：

<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="value" label="值">
          <template slot-scope="scope">
            <el-input v-model="scope.row.value" @blur="validate(scope.row, scope.$index)"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        tableData: [
          { id: 1, name: '1', value: '' },
          { id: 2, name: '2', value: '', children: [
            { id: 3, name: '3', value: '' },
            { id: 4, name: '4', value: '' }
          ]},
          { id: 5, name: '5', value: '' }
        ]
      },
      rules: {
        tableData: [
          { type: 'array', required: true, message: '表格不能为空', trigger: 'blur' },
          { validator: this.tableValidator, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validate(row, index) {
      this.$refs.form.validateField(`tableData.${index}.value`);
    },
    tableValidator(rule, value, callback) {
      const validateChildren = (rows) => {
        let valid = true;
        rows.forEach((row) => {
          if (row.children && row.children.length > 0) {
            if (!validateChildren(row.children)) {
              valid = false;
            }
          } else {
            if (!row.value) {
              valid = false;
            }
          }
        });
        return valid;
      };
      if (validateChildren(value)) {
        callback();
      } else {
        callback(new Error('表格数据不能为空'));
      }
    }
  }
}
</script>

2. 使用第三方组件

可以使用第三方组件，如 vue-easytable，该组件支持多层级树型表格，并提供了校验功能。具体步骤如下：

• 安装 vue-easytable 组件。
• 在组件中引入 vue-easytable。
• 定义树型表格的数据和配置项。
• 在配置项中设置校验规则。

示例代码如下：

<template>
  <div>
    <VueEasytable :columns="columns" :data="data" :options="options"></VueEasytable>
  </div>
</template>

<script>
import VueEasytable from 'vue-easytable'

export default {
  components: {
    VueEasytable
  },
  data() {
    return {
      columns: [
        { field: 'name', title: '名称' },
        { field: 'value', title: '值' }
      ],
      data: [
        { id: 1, name: '1', value: '' },
        { id: 2, name: '2', value: '', children: [
          { id: 3, name: '3', value: '' },
          { id: 4, name: '4', value: '' }
        ]},
        { id: 5, name: '5', value: '' }
      ],
      options: {
        table: {
          treeConfig: {
            children: 'children',
            hasChildren(row) {
              return row.children && row.children.length > 0
            }
          },
          validateConfig: {
            name: {
              required: true,
              message: '名称不能为空'
            },
            value: {
              required: true,
              message: '值不能为空'
            }
          }
        }
      }
    }
  }
}
</script>
``