wip: Form改造中

src/components/Form/src/Form.vue

@@ -183,27 +183,7 @@ export default defineComponent({
     const renderFormItem = (item: FormSchema) => {
       // 单独给只有options属性的组件做判断
       // const notRenderOptions = ['SelectV2', 'Cascader', 'Transfer']
-      const componentSlots = (item?.componentProps as any)?.slots || {}
-      const slotsMap: Recordable = {
-        ...setItemComponentSlots(componentSlots)
-      }
-      // 如果是select组件，并且没有自定义模板，自动渲染options
-      if (item.component === ComponentNameEnum.SELECT) {
-        slotsMap.default = !componentSlots.default
-          ? () => renderSelectOptions(item)
-          : () => {
-              return componentSlots.default(
-                unref((item?.componentProps as SelectComponentProps)?.options)
-              )
-            }
-      }
 
-      // 虚拟列表
-      if (item.component === ComponentNameEnum.SELECT_V2 && componentSlots.default) {
-        slotsMap.default = ({ item }: any) => {
-          return componentSlots.default(item)
-        }
-      }
       // if (
       //   item?.component !== 'SelectV2' &&
       //   item?.component !== 'Cascader' &&
@@ -268,19 +248,56 @@ export default defineComponent({
                             label={v[valueAlias]}
                             disabled={v[disabledAlias]}
                           >
-                            {v[labelAlias]}
+                            {() =>
+                              componentProps?.slots?.default
+                                ? componentProps?.slots?.default({ option: v })
+                                : v[labelAlias]
+                            }
                           </Com>
                         )
                       })
                   }
                 }
 
+                const componentSlots = (item?.componentProps as any)?.slots || {}
+                const slotsMap: Recordable = {
+                  ...setItemComponentSlots(componentSlots)
+                }
+                // 如果是select组件，并且没有自定义模板，自动渲染options
+                if (item.component === ComponentNameEnum.SELECT) {
+                  slotsMap.default = !componentSlots.default
+                    ? () => renderSelectOptions(item)
+                    : () => {
+                        return componentSlots.default(
+                          unref((item?.componentProps as SelectComponentProps)?.options)
+                        )
+                      }
+                }
+
+                // 虚拟列表
+                if (item.component === ComponentNameEnum.SELECT_V2 && componentSlots.default) {
+                  slotsMap.default = ({ item }) => {
+                    return componentSlots.default(item)
+                  }
+                }
+
+                // 单选框组
+                if (item.component === ComponentNameEnum.RADIO_GROUP) {
+                  slotsMap.default = !componentSlots.default
+                    ? () => renderRadioOptions(item)
+                    : () => {
+                        return componentSlots.default(
+                          unref((item?.componentProps as RadioComponentProps)?.options)
+                        )
+                      }
+                }
+
                 return (
                   <Com
                     vModel={formModel.value[item.field]}
                     {...(autoSetPlaceholder && setTextPlaceholder(item))}
                     {...setComponentProps(item)}
-                    style={item.componentProps?.style}
+                    style={item.componentProps?.style || {}}
                   >
                     {{ ...slotsMap }}
                   </Com>

src/components/Form/src/componentMap.ts

@@ -25,7 +25,7 @@ import { ComponentName } from '@/types/components'
 
 const componentMap: Recordable<Component, ComponentName> = {
   Radio: ElRadio,
-  // RadioGroup: ElRadioGroup,
+  RadioGroup: ElRadioGroup,
   Checkbox: ElCheckboxGroup,
   CheckboxButton: ElCheckboxGroup,
   Input: ElInput,

src/components/Form/src/components/useRenderRadio.tsx

@@ -1,23 +1,26 @@
 import { FormSchema } from '@/types/form'
 import { ElRadio, ElRadioButton } from 'element-plus'
 import { defineComponent } from 'vue'
-import { ComponentNameEnum } from '@/types/components.d'
+import { ComponentNameEnum, RadioGroupComponentProps } from '@/types/components.d'
 
 export const useRenderRadio = () => {
-  const renderRadioOptions = (
-    item: FormSchema,
-    type?: ComponentNameEnum.RADIO | ComponentNameEnum.RADIO_BUTTON = ComponentNameEnum.RADIO
-  ) => {
+  const renderRadioOptions = (item: FormSchema) => {
     // 如果有别名，就取别名
-    const labelAlias = item?.componentProps?.optionsAlias?.labelField
-    const valueAlias = item?.componentProps?.optionsAlias?.valueField
-    const Com = (item.component === 'Radio' ? ElRadio : ElRadioButton) as ReturnType<
-      typeof defineComponent
-    >
-    return item?.componentProps?.options?.map((option) => {
+    const componentProps = item.componentProps as RadioGroupComponentProps
+    const valueAlias = componentProps?.props?.value || 'value'
+    const labelAlias = componentProps?.props?.label || 'label'
+    const disabledAlias = componentProps?.props?.disabled || 'disabled'
+    const Com = (
+      item.component === ComponentNameEnum.RADIO_GROUP ? ElRadio : ElRadioButton
+    ) as ReturnType<typeof defineComponent>
+    return componentProps?.options?.map((option) => {
       const { value, ...other } = option
       return (
-        <Com {...other} label={option[valueAlias || 'value']}>
+        <Com
+          {...other}
+          disabled={option[disabledAlias || 'disabled']}
+          label={option[valueAlias || 'value']}
+        >
           {option[labelAlias || 'label']}
         </Com>
       )