formItem增加hidden属性

src/components/ElFormTabs.vue

@@ -25,7 +25,7 @@ const modelValue = computed({
     <el-tab-pane :label="tab.label" :name="tab.name" v-for="tab in tabs" :key="tab.name">
       <el-row :gutter="20">
         <el-col :span="item.span || formConfig.span || 12" v-for="(item, index) in tab.children" :key="index">
-          <el-form-item :label="item.label" :rules="item.rules" :prop="item.name">
+          <el-form-item :label="item.label" :rules="item.rules" :prop="item.name" v-show="!item.hidden">
             <form-comp :item="item" v-model="formData[item.name]">
               <template #[slot.alias]="slotProps" v-for="slot in item.slots" :key="slot.alias">
                 <slot :name="slot.alias" v-bind="slotProps"></slot>

src/components/form/AdvancedForm.vue

@@ -72,13 +72,15 @@ props.formConfig.formItems.forEach(item => {
             <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>
+        <template v-else>
+          <el-form-item :label="sub.label" :rules="sub.rules" :prop="sub.name" v-show="!sub.hidden">
+            <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>
+        </template>
         <!-- <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">

src/components/form/BasicForm.vue

@@ -59,13 +59,15 @@ props.formConfig.formItems.forEach(item => {
           <slot :name="slot.alias" v-bind="slotProps"></slot>
         </template>
       </el-form-tabs>
-      <el-form-item :label="item.label" :rules="item.rules" :prop="item.name" v-else>
-        <form-comp :item="item" v-model="formData[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 v-else>
+        <el-form-item :label="item.label" :rules="item.rules" :prop="item.name" v-show="!item.hidden">
+          <form-comp :item="item" v-model="formData[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>
     </el-col>
   </el-row>
 </template>

src/types/form.ts

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

src/views/form/Basic.vue

@@ -157,8 +157,8 @@ const formConfig = reactive<BasicForm>({
       ],
       events: {
         change(item: any) {
-          console.log(item)
           formData.name = 'c'
+          formConfig.formItems[1].hidden = true
         }
       }
     },