fix(ProForm): 修复自定义插槽组件失效bug

BoBoooooo · Jun 7, 2021 · 7296969 · 7296969
1 parent 45cbc57
commit 7296969
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/src/component/pro-form/src/ProForm.vue b/src/component/pro-form/src/ProForm.vue
@@ -24,7 +24,11 @@
     >
       <!-- 遍历从父组件传入的data，data下有list和config两个属性，list下的每个对象是表示一行组件的集合 -->
       <template v-for="(item, index) in (data && data.list) || []">
-        <ProLayout :models="models" :key="index" :data="data" v-on="$listeners" :item="item" :readOnly="readOnly" :rules="rules" :remote="remote" :formTableConfig="formTableConfig"></ProLayout>
+        <ProLayout :models="models" :key="index" :data="data" v-on="$listeners" :item="item" :readOnly="readOnly" :rules="rules" :remote="remote" :formTableConfig="formTableConfig">
+          <template :slot="slotName" slot-scope="scope" v-for="slotName in Object.keys($scopedSlots)">
+            <slot :name="slotName" :model="scope.model" :widget="scope.widget"></slot>
+          </template>
+        </ProLayout>
       </template>
     </el-form>
   </div>

diff --git a/src/component/pro-form/src/ProFormItem.vue b/src/component/pro-form/src/ProFormItem.vue
@@ -19,11 +19,6 @@
       </template>
     </template>
     <el-form-item v-if="widget.type === 'blank'" :label-width="widget.options.hiddenLabel ? '0' : labelWidth" :prop="widget.model" :key="widget.key" v-show="!widget.hidden">
-      <template slot="label">
-        <template v-if="!widget.options.hiddenLabel">
-          <span>{{ widget.name }}</span>
-        </template>
-      </template>
       <slot :name="widget.model" :model="models" :widget="widget"></slot>
     </el-form-item>
     <template v-if="widget.type === 'html'">

diff --git a/src/component/pro-form/src/ProLayout.vue b/src/component/pro-form/src/ProLayout.vue
@@ -23,6 +23,8 @@
             :formTableConfig="formTableConfig"
             :key="citem.key"
             v-on="$listeners"
+          >
+            <template :slot="slotName" slot-scope="scope" v-for="slotName in Object.keys($scopedSlots)"> <slot :name="slotName" :model="scope.model" :widget="scope.widget"></slot> </template
           ></ProLayout>
           <!-- 正常组件通过ProFormItem生成 -->
           <ProFormItem
@@ -38,6 +40,9 @@
             v-on="$listeners"
             :formTableConfig="formTableConfig"
           >
+            <template :slot="slotName" slot-scope="scope" v-for="slotName in Object.keys($scopedSlots)">
+              <slot :name="slotName" :model="scope.model" :widget="scope.widget"></slot>
+            </template>
           </ProFormItem>
         </template>
       </el-col>
@@ -82,6 +87,8 @@
               :remote="remote"
               :formTableConfig="formTableConfig"
               :key="citem.key"
+            >
+              <template :slot="slotName" slot-scope="scope" v-for="slotName in Object.keys($scopedSlots)"> <slot :name="slotName" :model="scope.model" :widget="scope.widget"></slot> </template
             ></ProLayout>
             <ProFormItem
               v-else-if="!citem.hidden"
@@ -96,6 +103,9 @@
               @chartOnClick="chartOnClick"
               :formTableConfig="formTableConfig"
             >
+              <template :slot="slotName" slot-scope="scope" v-for="slotName in Object.keys($scopedSlots)">
+                <slot :name="slotName" :model="scope.model" :widget="scope.widget"></slot>
+              </template>
             </ProFormItem>
           </template>
         </td>
@@ -114,6 +124,8 @@
       @btnOnClick="btnOnClick"
       v-on="$listeners"
       :formTableConfig="formTableConfig"
+    >
+      <template :slot="slotName" slot-scope="scope" v-for="slotName in Object.keys($scopedSlots)"> <slot :name="slotName" :model="scope.model" :widget="scope.widget"></slot> </template
     ></Tabs>
   </div>
   <!-- 普通行布局方式 -->
@@ -131,6 +143,9 @@
       v-on="$listeners"
       :formTableConfig="formTableConfig"
     >
+      <template :slot="slotName" slot-scope="scope" v-for="slotName in Object.keys($scopedSlots)">
+        <slot :name="slotName" :model="scope.model" :widget="scope.widget"></slot>
+      </template>
     </ProFormItem>
   </div>
 </template>

diff --git a/src/component/pro-form/src/components/Tabs/index.vue b/src/component/pro-form/src/components/Tabs/index.vue
@@ -9,7 +9,11 @@
   <el-tabs class="tabs" v-model="activeName" :tab-position="widget.options.position" :type="widget.options.type" style="width: 100%">
     <el-tab-pane :key="widget.name" v-for="widget in widget.items" :label="widget.label" :name="widget.name" lazy>
       <template v-for="(item, index) in widget.list">
-        <ProLayout :item="item" :key="index" v-on="$listeners" v-bind="$attrs"></ProLayout>
+        <ProLayout :item="item" :key="index" v-on="$listeners" v-bind="$attrs">
+          <template :slot="slotName" slot-scope="scope" v-for="slotName in Object.keys($scopedSlots)">
+            <slot :name="slotName" :model="scope.model" :widget="scope.widget"></slot>
+          </template>
+        </ProLayout>
       </template>
     </el-tab-pane>
   </el-tabs>