vxe 表单校验循环的数组的表格并且不绑定字段 校验判断不能为空 附代码

你好，以下是一个基于 Element UI 的表单校验循环的数组的表格并且不绑定字段，校验判断不能为空的示例代码：

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名">
        <template slot-scope="{ row }">
          <el-form-item :prop="'name[' + row.id + ']'" :rules="{ required: true, message: '请输入姓名', trigger: 'blur' }">
            <el-input v-model="row.name"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="年龄">
        <template slot-scope="{ row }">
          <el-form-item :prop="'age[' + row.id + ']'" :rules="{ required: true, message: '请输入年龄', trigger: 'blur' }">
            <el-input-number v-model="row.age"></el-input-number>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      rules: {},
      tableData: [
        { id: 1, name: '', age: null },
        { id: 2, name: '', age: null }
      ]
    };
  },
  mounted() {
    this.tableData.forEach(item => {
      this.$set(this.form, `name[${item.id}]`, item.name);
      this.$set(this.form, `age[${item.id}]`, item.age);
      this.$set(this.rules, `name[${item.id}]`, { required: true, message: '请输入姓名', trigger: 'blur' });
      this.$set(this.rules, `age[${item.id}]`, { required: true, message: '请输入年龄', trigger: 'blur' });
    });
  }
};
</script>

该示例中，我们先使用 `v-for` 循环渲染表格数据，然后对于每个表格行，我们使用 `slot-scope` 获取到当前行的数据对象 `row`。接着，我们使用 `:prop` 绑定一个动态字段名，使用 `:rules` 绑定一个动态的校验规则对象。在 `prop` 和 `rules` 中，我们都使用了当前行数据的 `id` 属性作为动态字段名的一部分，这样可以保证每个字段都是唯一的，不会互相干扰。

在 `mounted` 钩子函数中，我们使用 `$set` 方法动态为 `form`、`rules` 对象添加字段和校验规则，这样表单校验器才能正确地找到这些字段和规则。

注意，我们使用了 `el-form-item` 组件来包装表单控件，并设置了 `prop` 和 `rules` 属性。这是因为表单校验器只会对 `el-form-item` 组件进行校验，而不会对 `el-input`、`el-input-number` 等控件进行校验。

希望这个示例能够对你有所帮助！