fixbug: from

jsxiaosi · Jan 20, 2022 · 9b005ad · 9b005ad
1 parent d29c886
commit 9b005ad
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 32 deletions.
diff --git a/src/components/Form/src/components/FormItem.vue b/src/components/Form/src/components/FormItem.vue
@@ -25,11 +25,15 @@
       function renderComponent() {
         // const Comp = componentMap.get(formItem.component) as ReturnType<typeof defineComponent>;
         const Comp = resolveComponent(formItem.component) as ReturnType<typeof defineComponent>;
-        return (
-          <Comp v-model={formModel[formItem.prop]} {...formItem.props}>
-            {childrenComponent()}
-          </Comp>
-        );
+        if (elComponentItem[formItem.component]) {
+          return (
+            <Comp v-model={formModel[formItem.prop]} {...formItem.props}>
+              {childrenComponent()}
+            </Comp>
+          );
+        } else {
+          return <Comp v-model={formModel[formItem.prop]} {...formItem.props} />;
+        }
       }
 
       function childrenComponent() {
@@ -47,7 +51,7 @@
             </>
           );
         } else {
-          return null;
+          return;
         }
       }
 
@@ -66,11 +70,11 @@
 
       return () => {
         const { formItem } = props;
-        const { prop, render, rules, label, isSlot } = formItem;
+        const { prop, render, rules, label } = formItem;
         const values = { formModel: formModel, formItem: formItem };
         const solfn = getSlot(slots, prop, values);
         const getContent = () => {
-          return isSlot ? solfn : render ? render(values) : renderComponent();
+          return solfn ? solfn : render ? render(values) : renderComponent();
         };
         return (
           <el-form-item label={label} prop={prop} rules={rules}>

diff --git a/src/components/Form/types/from.ts b/src/components/Form/types/from.ts
@@ -19,7 +19,6 @@ export interface FormItemProps {
  * @param(component) 组件名称，ElInput，ElSelect
  * @param(label) 标签名
  * @param(prop) form表单双向绑定字段
- * @param(isSlot) 是否自定义内容
  * @param(props) 组件属性
  * @param(rules) 表单校验
  * @param(childrenComponent) 子组件属性 类似ElSelect、ElCheckboxGroup、ElRadioGroup等组件
@@ -28,7 +27,6 @@ export interface FormItemListProps {
   component: string;
   label: string;
   prop: string;
-  isSlot?: boolean;
   props?: object;
   rules?: object | Array<object>;
   childrenComponent?: {

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -80,6 +80,7 @@ div:focus {
 ul {
   list-style-type: none;
   padding: 0;
+  margin: 0;
 }
 
 @for $i from 1 to 6 {

diff --git a/src/views/components/form/index.vue b/src/views/components/form/index.vue
@@ -10,25 +10,6 @@
           placeholder="自定义输入框"
         ></el-input>
       </template>
-      <template #dateTime="{ formModel, formItem }">
-        <el-date-picker
-          v-model="formModel[formItem.prop]"
-          type="datetimerange"
-          range-separator="To"
-          start-placeholder="Start date"
-          end-placeholder="End date"
-        ></el-date-picker>
-      </template>
-      <template #cascader="{ formModel, formItem }">
-        <el-cascader
-          v-model="formModel[formItem.prop]"
-          :options="cascaderOptions"
-          type="datetimerange"
-          range-separator="To"
-          start-placeholder="Start date"
-          end-placeholder="End date"
-        />
-      </template>
     </Form>
   </div>
 </template>
@@ -331,13 +312,23 @@
           {
             component: 'ElDatePicker',
             label: '时间选择器',
-            isSlot: true,
             prop: 'dateTime',
+            props: {
+              type: 'datetimerange',
+              rangeSeparator: 'To',
+              startPlaceholder: 'Start date',
+              endPlaceholder: 'End date',
+            },
           },
           {
             component: 'ElCascader',
             label: '多级选择器',
-            isSlot: true,
+            props: {
+              options: cascaderOptions,
+              onVisibleChange: (e: any) => {
+                console.log(e);
+              },
+            },
             prop: 'cascader',
           },
         ],
@@ -389,7 +380,6 @@
             component: 'ElInput',
             label: 'slot组件',
             prop: 'slotInput',
-            isSlot: true,
             rules: [{ required: true, type: 'string' }],
           },
           {