feat: 新增Form组件配置项slot支持

刘汉宸
1 parent aa5aca16
Showing 2 changed files with 51 additions and 27 deletions Show diff stats
packages/form/form-render.vue
packages/form/index.vue
@@ -9,6 +9,7 @@
         :key="index"
         :span="type === 'div' ? undefined : item.group.span || 24"
         :style="{ width: type === 'div' ? '100%' : undefined }"
+        :class="colClassRender(item, index, colClass)"
       >
         <component :is="rowComponent" class="zee-form__flex-wrap" :class="groupClass || 'zee-form__group'">
           <!-- 表单分组标题 -->
@@ -41,34 +42,38 @@
         :span="type === 'div' ? undefined : item.span || span"
         :key="index"
         :style="{ width: type === 'div' && item.style && item.style.width.includes('%') ? item.style.width : undefined, paddingRight: '10px' }"
+        :class="colClassRender(item, index, colClass)"
       >
         <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.fullKey" :rules="item.rules" :class="itemClass || 'zee-form__item'">
-          <!-- 自定义组件 -->
-          <dynamic-render
-            v-if="typeof item.type === 'function'"
-            :render="
-              item.type($createElement, {
-                model: value,
-                config: {
-                  props: { ...item.props, value: itemValue(item) },
-                  style: item.style || { maxWidth: '100%' },
-                  on: {
-                    ...bindItemEvent(item),
-                    input: v => onInput({ value: v, item }),
+          <slot v-if="$slots[item.fullKey]" :name="item.fullKey" :value="itemValue(item)" :model="value"></slot>
+          <template v-else>
+            <!-- 自定义组件 -->
+            <dynamic-render
+              v-if="typeof item.type === 'function'"
+              :render="
+                item.type($createElement, {
+                  model: value,
+                  config: {
+                    props: { ...item.props, value: itemValue(item) },
+                    style: item.style || { maxWidth: '100%' },
+                    on: {
+                      ...bindItemEvent(item),
+                      input: v => onInput({ value: v, item }),
+                    },
                   },
-                },
-              })
-            "
-          ></dynamic-render>
-          <component
-            v-else
-            :is="item.type"
-            :value="itemValue(item)"
-            @input="v => onInput({ value: v, item })"
-            v-on="bindItemEvent(item)"
-            v-bind="item.props"
-            :style="item.style || { maxWidth: '100%' }"
-          ></component>
+                })
+              "
+            ></dynamic-render>
+            <component
+              v-else
+              :is="item.type"
+              :value="itemValue(item)"
+              @input="v => onInput({ value: v, item })"
+              v-on="bindItemEvent(item)"
+              v-bind="item.props"
+              :style="item.style || { maxWidth: '100%' }"
+            ></component>
+          </template>
         </el-form-item>
       </component>
     </template>
@@ -89,6 +94,7 @@ export default {
     titleClass: String,
     contentClass: String,
     itemClass: String,
+    colClass: [String, Function],
     groupClass: String,
     type: String,
     span: Number,
@@ -103,6 +109,20 @@ export default {
   },
   methods: {
     /**
+     * @description 渲染col class
+     * @param {Object} item 表单项配置
+     * @param {Object} index 表单项渲染下标
+     * @param {Object} colClass 表单项配置
+     * @return {String} col class
+     */
+    colClassRender(item, index, colClass) {
+      if (colClass instanceof Function) {
+        return colClass(item, index);
+      } else {
+        return colClass;
+      }
+    },
+    /**
      * @description 根据表单项的key查询该值
      * @param {Object} item 表单项配置
      * @returns {Any} 返回值
@@ -21,6 +21,7 @@
       :title-class="titleClass"
       :content-class="contentClass"
       :item-class="itemClass"
+      :col-class="colClass"
       :group-class="groupClass"
       :list="formList"
       :value="model"
@@ -30,7 +31,9 @@
       @item-change="onItemChange"
       @form-item-change="onFormItemChange"
       @item-update="onItemUpdate"
-    ></form-render>
+    >
+      <slot v-for="key in slotKeys" :name="key" :slot="key"></slot>
+    </form-render>
   </el-form>
 </template>
@@ -48,6 +51,7 @@ export default {
     titleClass: String,
     contentClass: String,
     itemClass: String,
+    colClass: [String, Function],
     groupClass: String,
     labelWidth: String,
     labelPosition: String,
@@ -62,8 +66,8 @@ export default {
     },
   },
   data() {
-    // const $fullProps = { ...this.$attrs, ...this.$props };
     return {
+      slotKeys: Object.keys(this.$slots),
       model: {},
       formModel: {},
       formList: [],