vue3 vxe多级表头可编辑表单全量数据校验 根据数组循环出来的两个表格 校验判断值不能为空 不使用xe-utils 附代码

好的，针对你的问题，我可以给出以下代码示例供你参考：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th rowspan="2">Name</th>
          <th colspan="2">Score</th>
        </tr>
        <tr>
          <th>Chinese</th>
          <th>Math</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.name }}</td>
          <td>
            <input type="text" v-model="item.chinese" @blur="validate(index, 'chinese')" />
          </td>
          <td>
            <input type="text" v-model="item.math" @blur="validate(index, 'math')" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', chinese: '', math: '' },
        { name: 'Mary', chinese: '', math: '' },
        { name: 'Tom', chinese: '', math: '' },
      ],
    };
  },
  methods: {
    validate(index, field) {
      const item = this.tableData[index];
      if (!item[field]) {
        alert(`${field} can not be empty`);
      }
    },
  },
};
</script>

这是一个简单的 Vue3 组件，其中模板部分使用了 HTML 的表格标签来展示数据。使用 `v-for` 指令循环渲染出了多行数据，并使用 `v-model` 指令实现了数据的双向绑定。同时给每个输入框添加了 `@blur` 事件，用于在失去焦点时触发校验方法。

在校验方法中，根据传入的索引和字段名，获取对应的数据项，判断其对应的值是否为空，如果为空，则弹出提示信息。

需要说明的是，这里并没有使用 `xe-utils` 工具库，而是直接通过简单的 JavaScript 代码实现了数据的校验。当然，如果你需要更加复杂的校验逻辑，也可以考虑使用其他的工具库来实现。