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

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

<template>
  <vxe-form ref="form" :model="form" :rules="rules">
    <vxe-table :data="tableData" border>
      <vxe-table-column title="姓名">
        <template #default="{ row }">
          <vxe-form-item :field="'name[' + row.id + ']'" :rules="{ required: true, message: '请输入姓名', trigger: 'blur' }">
            <vxe-input v-model="row.name"></vxe-input>
          </vxe-form-item>
        </template>
      </vxe-table-column>
      <vxe-table-column title="年龄">
        <template #default="{ row }">
          <vxe-form-item :field="'age[' + row.id + ']'" :rules="{ required: true, message: '请输入年龄', trigger: 'blur' }">
            <vxe-input-number v-model="row.age"></vxe-input-number>
          </vxe-form-item>
        </template>
      </vxe-table-column>
    </vxe-table>
  </vxe-form>
</template>

<script>
import { ref } from 'vue';
import 'xe-utils';
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';

export default {
  setup() {
    const form = ref({});
    const rules = ref({});
    const tableData = ref([
      { id: 1, name: '', age: null },
      { id: 2, name: '', age: null }
    ]);

    const validate = async () => {
      try {
        await VXETable.formQueue.validate('form');
        console.log('校验通过');
      } catch (error) {
        console.error('校验失败', error);
      }
    };

    const initFormRules = () => {
      tableData.value.forEach(item => {
        VXETable.form.createItemRules(rules, `name[${item.id}]`, { required: true, message: '请输入姓名', trigger: 'blur' });
        VXETable.form.createItemRules(rules, `age[${item.id}]`, { required: true, message: '请输入年龄', trigger: 'blur' });
      });
    };

    return {
      form,
      rules,
      tableData,
      validate,
      initFormRules
    };
  },
  mounted() {
    VXETable.form.create(this, {
      name: 'form',
      props: {
        data: this.form,
        rules: this.rules
      }
    });
    this.initFormRules();
  }
};
</script>

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

在 `setup` 中，我们使用 `ref` 定义了表单数据对象 `form`、校验规则对象 `rules` 和表格数据数组 `tableData`。接着，我们定义了一个 `validate` 方法，用于手动触发全量校验；以及一个 `initFormRules` 方法，用于初始化表单校验规则。在 `mounted` 中，我们使用 `VXETable.form.create` 方法创建了一个表单控制器，并将其挂载到当前组件实例上。最后，我们调用 `initFormRules` 方法初始化表单校验规则。

注意，VXE-Table 的表单校验器是基于 `async-validator` 库实现的，因此校验规则的写法和 `async-validator` 是一致的。在 `initFormRules` 方法中，我们使用 `VXETable.form.createItemRules` 方法动态为 `rules` 对象添加字段和校验规则。

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