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

好的，以下是一个示例代码，使用了 Vue3 和 VXE-Table 进行多级表头可编辑表单全量数据校验：

<template>
  <div>
    <vxe-grid ref="grid1" :columns="columns1" :data="data1" edit-config="{trigger: 'click'}"></vxe-grid>
    <vxe-grid ref="grid2" :columns="columns2" :data="data2" edit-config="{trigger: 'click'}"></vxe-grid>
    <button @click="validateData">校验数据</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import XEUtils from 'xe-utils'
import VXEGrid from 'vxe-table-3/lib/grid'
import 'vxe-table-3/lib/style.css'

export default defineComponent({
  components: {
    VXEGrid
  },
  setup() {
    const columns1 = [
      {
        title: '姓名',
        children: [
          {
            title: '姓',
            field: 'firstName',
            width: 120,
            editable: true
          },
          {
            title: '名',
            field: 'lastName',
            width: 120,
            editable: true
          }
        ]
      },
      {
        title: '性别',
        field: 'gender',
        width: 80,
        editable: true
      }
    ]
    const columns2 = [
      {
        title: '学科',
        children: [
          {
            title: '数学',
            field: 'math',
            width: 100,
            editable: true
          },
          {
            title: '语文',
            field: 'chinese',
            width: 100,
            editable: true
          }
        ]
      },
      {
        title: '总分',
        field: 'total',
        width: 80,
        editable: false
      }
    ]
    const data1 = [
      {
        firstName: '张',
        lastName: '三',
        gender: '男'
      },
      {
        firstName: '李',
        lastName: '四',
        gender: '女'
      }
    ]
    const data2 = [
      {
        math: '',
        chinese: '',
        total: ''
      }
    ]
    const validateData = () => {
      const grid1 = XEUtils.get(this, '$refs.grid1.$xegrid')
      const grid2 = XEUtils.get(this, '$refs.grid2.$xegrid')
      let isValid = true
      grid1.getTableData().forEach(row => {
        if (!row.firstName || !row.lastName || !row.gender) {
          grid1.setActiveCell({ row, column: { property: 'firstName' } })
          isValid = false
          return false
        }
      })
      if (!isValid) return
      grid2.getTableData().forEach(row => {
        if (!row.math || !row.chinese) {
          grid2.setActiveCell({ row, column: { property: 'math' } })
          isValid = false
          return false
        }
        row.total = parseInt(row.math) + parseInt(row.chinese)
      })
      if (!isValid) return
      console.log('数据校验通过')
    }
    return {
      columns1,
      columns2,
      data1,
      data2,
      validateData
    }
  }
})
</script>

在这个示例中，我们使用了 VXE-Table 的 Grid 组件来展示两个表格，分别是 `grid1` 和 `grid2`。这两个表格的列定义分别是 `columns1` 和 `columns2`，数据分别是 `data1` 和 `data2`。

当用户点击“校验数据”按钮时，我们会分别遍历这两个表格的数据，判断每一行数据中的必填字段是否为空。如果有必填字段为空，我们会将焦点定位到第一个空字段的单元格上，并提示用户该字段不能为空。如果所有必填字段都不为空，我们会计算出每一行数据的总分，并把总分填入相应的单元格中。

最后，如果所有数据的校验都通过，则会在控制台输出“数据校验通过”。