profrom插槽支持作用域插槽

src/components/ProTable.vue

@@ -302,8 +302,8 @@ defineExpose({
       @success="handleFormSuccess"
       v-if="dialogVisible"
     >
-      <template #[slot.alias] v-for="slot in formSlots" :key="slot.alias">
-        <slot :name="slot.alias"></slot>
+      <template #[slot.alias]="slotProps" v-for="slot in formSlots" :key="slot.alias">
+        <slot :name="slot.alias" v-bind="slotProps"></slot>
       </template>
     </dialog-form>
   </div>

src/components/form/AdvancedForm.vue

@@ -42,8 +42,8 @@ const formData = computed(() => {
       <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">
           <form-comp :item="sub" v-model="formData[sub.name]">
-            <template #[slot.alias] v-for="slot in sub.slots" :key="slot.alias">
-              <slot :name="slot.alias"></slot>
+            <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>

src/components/form/BasicForm.vue

@@ -25,8 +25,8 @@ const formData = computed(() => {
     <el-col :span="item.span || formConfig.span || 12" v-for="(item, index) in formConfig.formItems" :key="index">
       <el-form-item :label="item.label" :rules="item.rules" :prop="item.name">
         <form-comp :item="item" v-model="formData[item.name]">
-          <template #[slot.alias] v-for="slot in item.slots" :key="slot.alias">
-            <slot :name="slot.alias"></slot>
+          <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>

src/components/form/DialogForm.vue

@@ -60,8 +60,8 @@ const submit = async () => {
     :close-on-click-modal="false"
   >
     <pro-form ref="formRef" :formConfig="formConfig" :formData="formInitData" :create="create" :update="update">
-      <template #[slot.alias] v-for="slot in formSlots" :key="slot.alias">
-        <slot :name="slot.alias"></slot>
+      <template #[slot.alias]="slotProps" v-for="slot in formSlots" :key="slot.alias">
+        <slot :name="slot.alias" v-bind="slotProps"></slot>
       </template>
     </pro-form>
 

src/components/form/ProForm.vue

@@ -63,13 +63,13 @@ defineExpose({
 <template>
   <el-form :model="formInitData" ref="formRef" v-bind="formProps" class="form">
     <advanced-form :formConfig="formConfig" :formData="formInitData" v-if="formConfig.advanced">
-      <template #[slot.alias] v-for="slot in formSlots" :key="slot.alias">
-        <slot :name="slot.alias"></slot>
+      <template #[slot.alias]="slotProps" v-for="slot in formSlots" :key="slot.alias">
+        <slot :name="slot.alias" v-bind="slotProps"></slot>
       </template>
     </advanced-form>
     <basic-form :formConfig="formConfig" :formData="formInitData" v-else>
-      <template #[slot.alias] v-for="slot in formSlots" :key="slot.alias">
-        <slot :name="slot.alias"></slot>
+      <template #[slot.alias]="slotProps" v-for="slot in formSlots" :key="slot.alias">
+        <slot :name="slot.alias" v-bind="slotProps"></slot>
       </template>
     </basic-form>
   </el-form>

src/views/form/Basic.vue

@@ -62,16 +62,76 @@ const formConfig = reactive<BasicForm>({
     {
       label: '字段名',
       value: '',
-      name: 'name',
-      type: 'input',
+      name: 'field',
+      type: 'cascader',
+      props: {
+        options: [
+          {
+            value: 'guide',
+            label: 'Guide',
+            children: [
+              {
+                value: 'disciplines',
+                label: 'Disciplines',
+                children: [
+                  {
+                    value: 'consistency',
+                    label: 'Consistency'
+                  },
+                  {
+                    value: 'feedback',
+                    label: 'Feedback'
+                  },
+                  {
+                    value: 'efficiency',
+                    label: 'Efficiency'
+                  },
+                  {
+                    value: 'controllability',
+                    label: 'Controllability'
+                  }
+                ]
+              },
+              {
+                value: 'navigation',
+                label: 'Navigation',
+                children: [
+                  {
+                    value: 'side nav',
+                    label: 'Side Navigation'
+                  },
+                  {
+                    value: 'top nav',
+                    label: 'Top Navigation'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            value: 'resource',
+            label: 'Resource',
+            children: [
+              {
+                value: 'axure',
+                label: 'Axure Components'
+              },
+              {
+                value: 'sketch',
+                label: 'Sketch Templates'
+              },
+              {
+                value: 'docs',
+                label: 'Design Documentation'
+              }
+            ]
+          }
+        ]
+      },
       slots: [
         {
-          name: 'prepend',
-          alias: 'prepend'
-        },
-        {
-          name: 'append',
-          alias: 'append'
+          name: 'default',
+          alias: 'cDefault'
         }
       ]
     }
@@ -101,6 +161,10 @@ const handleSave = () => {
         <template #prepend1> test1 </template>
         <template #append> testt </template>
         <template #append1> test1 </template>
+        <template #cDefault="{ node, data }">
+          <span>{{ data.label }}</span>
+          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+        </template>
       </pro-form>
       <div class="text-center">
         <el-button type="primary" @click="handleSave">保存</el-button>