wip: Form改造中

src/components/Form/src/Form.vue

@@ -21,7 +21,7 @@ import { set } from 'lodash-es'
 import { FormProps } from './types'
 import { Icon } from '@/components/Icon'
 import { FormSchema, FormSetPropsType } from '@/types/form'
-import { ComponentNameEnum } from '@/types/components.d'
+import { ComponentNameEnum, SelectComponentProps } from '@/types/components.d'
 
 const { getPrefixCls } = useDesign()
 
@@ -182,9 +182,10 @@ export default defineComponent({
       if (item.component === ComponentNameEnum.SELECT) {
         slotsMap.default = !componentSlots.default
           ? () => renderOptions(item)
-          : (option: any) => {
-              console.log(option)
-              return componentSlots.default(option)
+          : () => {
+              return componentSlots.default(
+                unref((item?.componentProps as SelectComponentProps)?.options)
+              )
             }
       }
       // if (

src/components/Form/src/components/useRenderSelect.tsx

@@ -8,16 +8,20 @@ export const useRenderSelect = (slots: Slots) => {
   // 渲染 select options
   const renderSelectOptions = (item: FormSchema) => {
     const componentsProps = item.componentProps as SelectComponentProps
+    const optionGroupDefaultSlot = componentsProps.slots?.optionGroupDefault
     // 如果有别名，就取别名
     const labelAlias = componentsProps?.labelAlias
     return componentsProps?.options?.map((option) => {
       if (option?.options?.length) {
-        return (
+        return optionGroupDefaultSlot ? (
+          optionGroupDefaultSlot(option)
+        ) : (
           <ElOptionGroup label={option[labelAlias || 'label']}>
-            {() => {
-              return option?.options?.map((v) => {
-                return renderSelectOptionItem(item, v)
-              })
+            {{
+              default: () =>
+                option?.options?.map((v) => {
+                  return renderSelectOptionItem(item, v)
+                })
             }}
           </ElOptionGroup>
         )
@@ -33,6 +37,7 @@ export const useRenderSelect = (slots: Slots) => {
     const componentsProps = item.componentProps as SelectComponentProps
     const labelAlias = componentsProps?.labelAlias
     const valueAlias = componentsProps?.valueAlias
+    const optionDefaultSlot = componentsProps.slots?.optionDefault
 
     const { label, value, ...other } = option
 
@@ -43,11 +48,7 @@ export const useRenderSelect = (slots: Slots) => {
         value={valueAlias ? option[valueAlias] : value}
       >
         {{
-          default: () =>
-            // option 插槽名规则，{field}-option
-            componentsProps?.optionsSlot
-              ? getSlot(slots, `${item.field}-option`, { item: option })
-              : undefined
+          default: () => (optionDefaultSlot ? optionDefaultSlot(option) : undefined)
         }}
       </ElOption>
     )

src/components/Form/src/helper.ts

@@ -95,8 +95,8 @@ export const setItemComponentSlots = (formModel: any, slotsProps: Recordable = {
   for (const key in slotsProps) {
     if (slotsProps[key]) {
       if (isFunction(slotsProps[key])) {
-        slotObj[key] = (item: any) => {
-          return slotsProps[key]?.(unref(item?.item) || undefined, formModel)
+        slotObj[key] = () => {
+          return slotsProps[key]?.(formModel)
         }
       } else {
         slotObj[key] = () => {