| 提交 | 用户 | 时间 | ||
| 820397 | 1 | import { FormSchema } from '@/types/form' |
| H | 2 | import { ComponentOptions } from '@/types/components' |
| 3 | import { ElOption, ElOptionGroup } from 'element-plus' | |
| 4 | import { getSlot } from '@/utils/tsxHelper' | |
| 5 | import { Slots } from 'vue' | |
| 6 | ||
| 7 | export const useRenderSelect = (slots: Slots) => { | |
| 8 | // 渲染 select options | |
| 9 | const renderSelectOptions = (item: FormSchema) => { | |
| 10 | // 如果有别名，就取别名 | |
| 11 | const labelAlias = item?.componentProps?.optionsAlias?.labelField | |
| 12 | return item?.componentProps?.options?.map((option) => { | |
| 13 | if (option?.options?.length) { | |
| 14 | return ( | |
| 15 | <ElOptionGroup label={option[labelAlias || 'label']}> | |
| 16 | {() => { | |
| 17 | return option?.options?.map((v) => { | |
| 18 | return renderSelectOptionItem(item, v) | |
| 19 | }) | |
| 20 | }} | |
| 21 | </ElOptionGroup> | |
| 22 | ) | |
| 23 | } else { | |
| 24 | return renderSelectOptionItem(item, option) | |
| 25 | } | |
| 26 | }) | |
| 27 | } | |
| 28 | ||
| 29 | // 渲染 select option item | |
| 30 | const renderSelectOptionItem = (item: FormSchema, option: ComponentOptions) => { | |
| 31 | // 如果有别名，就取别名 | |
| 32 | const labelAlias = item?.componentProps?.optionsAlias?.labelField | |
| 33 | const valueAlias = item?.componentProps?.optionsAlias?.valueField | |
| 34 | ||
| 35 | const { label, value, ...other } = option | |
| 36 | ||
| 37 | return ( | |
| 38 | <ElOption | |
| 39 | {...other} | |
| 40 | label={labelAlias ? option[labelAlias] : label} | |
| 41 | value={valueAlias ? option[valueAlias] : value} | |
| 42 | > | |
| 43 | {{ | |
| 44 | default: () => | |
| 45 | // option 插槽名规则，{field}-option | |
| 46 | item?.componentProps?.optionsSlot | |
| 47 | ? getSlot(slots, `${item.field}-option`, { item: option }) | |
| 48 | : undefined | |
| 49 | }} | |
| 50 | </ElOption> | |
| 51 | ) | |
| 52 | } | |
| 53 | ||
| 54 | return { | |
| 55 | renderSelectOptions | |
| 56 | } | |
| 57 | } | |
