子表单、子表单+增加动态校验

src/components/form/ElFormTable.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { BasicForm, BasicFormItem } from '@/types/form'
-import { containerTypes } from '@/utils/constants'
 
 interface Props {
   formItem: BasicFormItem
@@ -9,12 +8,12 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-const width = (props.formItem?.props as any)?.width
-
 const keys: any = {}
 props.formItem.children &&
   props.formItem.children.forEach((item: BasicFormItem) => {
-    keys[item.name] = ''
+    if (item.name) {
+      keys[item.name] = ''
+    }
   })
 
 if (!Array.isArray(props.formItem.value)) {
@@ -29,26 +28,30 @@ const handleAdd = () => {
 const handleDelete = (index: number) => {
   props.formItem.value.splice(index, 1)
 }
+
+const width = (props.formItem?.props as any)?.width
 </script>
 
 <template>
   <el-form-item>
     <div class="w-full">
       <el-button type="primary" @click="handleAdd" icon="plus" plain size="default" class="mb-2">添加</el-button>
-      <vxe-table :data="formItem.value" border>
+      <vxe-table class="w-full" :data="formItem.value" border>
         <vxe-column type="seq" width="50"></vxe-column>
         <vxe-column
           v-for="(item, key) in formItem.children"
           :title="item.label"
           :field="item.name"
-          :width="isArray(width) ? width[key] : width"
+          :width="Array.isArray(width) ? width[key] : width"
         >
-          <template #default="{ row }">
-            <form-comp :item="item" v-model="row[item.name]">
-              <template #[slot.alias]="slotProps" v-for="slot in item.slots" :key="slot.alias">
-                <slot :name="slot.alias" v-bind="slotProps"></slot>
-              </template>
-            </form-comp>
+          <template #default="{ row, _rowIndex }">
+            <el-form-item :prop="formItem.name + '.' + _rowIndex + '.' + item.name" :rules="item.rules">
+              <form-comp :item="item" v-model="row[item.name]">
+                <template #[slot.alias]="slotProps" v-for="slot in item.slots" :key="slot.alias">
+                  <slot :name="slot.alias" v-bind="slotProps"></slot>
+                </template>
+              </form-comp>
+            </el-form-item>
           </template>
         </vxe-column>
         <vxe-column fixed="right" title="操作" width="70">

src/components/form/ElSubForm.vue

@@ -49,9 +49,10 @@ const handleDelete = (index: number) => {
       <div class="flex-grow">
         <el-form-item
           v-for="child in formItem.children"
+          :key="index"
           :label="child.label"
           :rules="child.rules"
-          :prop="child.name"
+          :prop="formItem.name + '.' + index + '.' + child.name"
           v-show="!child.hidden"
         >
           <form-comp :item="child" v-model="item[child.name]">