用例修改

src/components/ElCustom.vue

@@ -1,3 +1,8 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
 <script setup lang="ts">
 interface Props {}
 const props = defineProps<Props>()

src/components/form/AdvancedForm.vue

@@ -14,14 +14,39 @@ const formData = computed(() => {
     const res = props.formData
     props.formConfig?.formItems.forEach(item => {
       item.group.forEach(element => {
-        // 避免修改当前表单项value重置其他表单项的value
-        res[element.name] =
-          res[element.name] !== undefined && element.value !== undefined ? res[element.name] : element.value
+        if (element.type !== 'form-tabs') {
+          if (!element.notFormItem) {
+            // 避免修改当前表单项value重置其他表单项的value
+            res[element.name] =
+              res[element.name] !== undefined && element.value !== undefined ? res[element.name] : element.value
+          }
+        } else {
+          element.children?.forEach(tab => {
+            tab.children?.forEach(child => {
+              res[child.name] =
+                res[child.name] !== undefined && child.value !== undefined ? res[child.name] : child.value
+            })
+          })
+        }
       })
     })
     return res
   }
 })
+
+// 构造formTabs插槽
+props.formConfig.formItems.forEach(item => {
+  item.group.forEach(child => {
+    if (child.type === 'form-tabs') {
+      child.slots = []
+      child.children?.forEach(tab => {
+        tab.children?.forEach((child: any) => {
+          Array.prototype.push.apply(child.slots, child.slots)
+        })
+      })
+    }
+  })
+})
 </script>
 
 <template>
@@ -34,13 +59,33 @@ const formData = computed(() => {
   >
     <el-row :gutter="20">
       <el-col :span="sub.span || formConfig.span || 12" v-for="(sub, key) in item.group" :key="key">
-        <el-form-item :label="sub.label" :rules="sub.rules" :prop="sub.name">
+        <el-form-tabs
+          v-if="sub.type === 'form-tabs'"
+          v-model="sub.value"
+          v-bind="sub.props"
+          :tabs="sub.children"
+          :formData="formData"
+          :formConfig="formConfig"
+          v-on="sub.events || {}"
+        >
+          <template #[slot.alias]="slotProps" v-for="slot in sub.slots" :key="slot.alias">
+            <slot :name="slot.alias" v-bind="slotProps"></slot>
+          </template>
+        </el-form-tabs>
+        <el-form-item :label="sub.label" :rules="sub.rules" :prop="sub.name" v-else>
           <form-comp :item="sub" v-model="formData[sub.name]">
             <template #[slot.alias]="slotProps" v-for="slot in sub.slots" :key="slot.alias">
               <slot :name="slot.alias" v-bind="slotProps"></slot>
             </template>
           </form-comp>
         </el-form-item>
+        <!-- <el-form-item :label="sub.label" :rules="sub.rules" :prop="sub.name">
+          <form-comp :item="sub" v-model="formData[sub.name]">
+            <template #[slot.alias]="slotProps" v-for="slot in sub.slots" :key="slot.alias">
+              <slot :name="slot.alias" v-bind="slotProps"></slot>
+            </template>
+          </form-comp>
+        </el-form-item> -->
       </el-col>
     </el-row>
   </el-card>

src/components/form/BasicForm.vue

@@ -14,8 +14,10 @@ const formData = computed(() => {
     const res = props.formData
     props.formConfig?.formItems.forEach(item => {
       if (item.type !== 'form-tabs') {
-        // 避免修改当前表单项value重置其他表单项的value
-        res[item.name] = res[item.name] !== undefined && item.value !== undefined ? res[item.name] : item.value
+        if (!item.notFormItem) {
+          // 避免修改当前表单项value重置其他表单项的value
+          res[item.name] = res[item.name] !== undefined && item.value !== undefined ? res[item.name] : item.value
+        }
       } else {
         item.children?.forEach(tab => {
           tab.children?.forEach(child => {

src/types/form.ts

@@ -22,6 +22,7 @@ export type BasicFormItem = {
   events?: object
   request?: Function
   slots?: Array<formSlot>
+  notFormItem?: boolean
 }
 
 export type AdvancedFormItem = {

src/views/form/Advanced.vue

@@ -151,6 +151,19 @@ const formConfig = reactive<AdvancedForm>({
           value: '',
           name: 'field5',
           type: 'input'
+        },
+        {
+          label: '自定义',
+          value: '',
+          name: 'custom',
+          type: 'custom',
+          notFormItem: true,
+          slots: [
+            {
+              name: 'default',
+              alias: 'customDefault'
+            }
+          ]
         }
       ]
     }
@@ -176,6 +189,9 @@ const handleSave = () => {
   <div class="overflow-auto pb-42px" style="height: calc(100vh - 101px - var(--main-padding) * 2)">
     <pro-form :formConfig="formConfig" :formData="formData" :create="create" :update="update" ref="proFormRef">
       <template #prepend>test</template>
+      <template #customDefault>
+        <div>自定义组件</div>
+      </template>
     </pro-form>
     <div
       class="fixed bottom-0 right-0 text-right bg-white px-16px py-5px form-footer"

src/views/form/Basic.vue

@@ -240,6 +240,7 @@ const formConfig = reactive<BasicForm>({
       value: '',
       name: 'custom',
       type: 'custom',
+      notFormItem: true,
       slots: [
         {
           name: 'default',

src/views/system/Configure.vue

@@ -11,7 +11,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 // loginConfig start
 // checkbox
 const isSingleLogin = ref<boolean>(false)
-const handleChange = val => {
+const handleChange = (val: any) => {
   isSingleLogin.value = val
 }
 // radio
@@ -70,7 +70,7 @@ const formEmailConfig = reactive<BasicForm>({
   span: 24,
   props: {
     labelPosition: 'right',
-    labelWidth: '120px'
+    labelWidth: '130px'
   },
   formItems: [
     {