diff --git a/src/select/hooks/useSelectOptions.ts b/src/select/hooks/useSelectOptions.ts index 0bfcf2fc8..5aecf33b6 100644 --- a/src/select/hooks/useSelectOptions.ts +++ b/src/select/hooks/useSelectOptions.ts @@ -85,17 +85,23 @@ export default function useSelectOptions( dynamicIndex += 1; } else if (componentName && componentName === getVueComponentName(OptionGroup)) { // 分组选项 + const labelSlot = child.data?.scopedSlots?.label; const groupOption = { group: (child.componentOptions.propsData as TdOptionProps)?.label, ...child.componentOptions.propsData, children: [] as TdOptionProps[], + groupSlots: labelSlot, }; child.componentOptions.children?.forEach?.((groupChild) => { + // 跳过 label 插槽节点 + if (groupChild.data?.slot === 'label') return; + // 跳过没有 componentOptions 的节点(如文本节点) + if (!groupChild.componentOptions) return; groupOption.children.push({ // 单独处理 style 和 class 参数的透传 - class: groupChild.data.staticClass, - style: groupChild.data.staticStyle, + class: groupChild.data?.staticClass, + style: groupChild.data?.staticStyle, // 透传其他常规参数 ...groupChild.componentOptions.propsData, slots: () => groupChild.componentOptions.children, diff --git a/src/select/option-group-props.ts b/src/select/option-group-props.ts index 6b2953217..203980472 100644 --- a/src/select/option-group-props.ts +++ b/src/select/option-group-props.ts @@ -4,6 +4,9 @@ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC * */ +import { TdOptionGroupProps } from '../select/type'; +import { PropType } from 'vue'; + export default { /** 是否显示分隔线 */ divider: { @@ -12,6 +15,6 @@ export default { }, /** 分组别名 */ label: { - type: String, + type: [String, Function] as PropType, }, }; diff --git a/src/select/optionGroup.tsx b/src/select/optionGroup.tsx index 9f9aa7e44..61cc29704 100644 --- a/src/select/optionGroup.tsx +++ b/src/select/optionGroup.tsx @@ -25,6 +25,7 @@ export default defineComponent({ const { sizeClassNames } = useCommonClassName(); const COMPONENT_NAME = usePrefixClass('select'); const { classPrefix } = useConfig('classPrefix'); + const renderTNode = useTNodeJSX(); const classes = computed(() => [ `${COMPONENT_NAME.value}-option-group`, @@ -37,14 +38,15 @@ export default defineComponent({ classes, classPrefix, componentName: COMPONENT_NAME, + renderTNode, }; }, render() { - const renderTNode = useTNodeJSX(); - const children: ScopedSlotReturnValue = renderTNode('default'); + const children: ScopedSlotReturnValue = this.renderTNode('default'); + const optionGroupLabel = this.renderTNode('label'); return (
  • - {(this.label ?? false) &&
    {this.label}
    } + {optionGroupLabel &&
    {optionGroupLabel}
    } {children}
  • ); diff --git a/src/select/select-panel.tsx b/src/select/select-panel.tsx index 2ca17831b..8f2222027 100644 --- a/src/select/select-panel.tsx +++ b/src/select/select-panel.tsx @@ -100,11 +100,12 @@ export default defineComponent({ const res: Array = []; // 动态赋予选项 index 的计数:默认从 0 开始累加,当含有用户创建条目的时候,创建条目 index 为 0,正常条目下标从 1 开始累加 let groupIndex = isCreateOptionShown.value ? 1 : 0; - props.options.forEach((option) => { - if ((option as SelectOptionGroup).group && (option as SelectOptionGroup).children) { + options.value?.forEach((option) => { + // 判断是否为分组:有 children 且有 group 或 groupSlots + const isGroup = (option as SelectOptionGroup).children && ((option as SelectOptionGroup).group || (option as any).groupSlots); + if (isGroup) { res.push({ ...option, - // 处理index使其在过滤后的分组中能正确触发上下移动键的hover效果 children: (option as SelectOptionGroup).children.filter(filterMethods).reduce((pre, cur) => { pre.push({ ...cur, index: groupIndex }); groupIndex += 1; @@ -268,12 +269,15 @@ export default defineComponent({ slots: VNode; class: string | undefined; style: { [key: string]: string } | undefined; + groupSlots?: VNode[]; } & OptionsType, index, ) => { if (item.children) { + // 处理 label 插槽(groupSlots 是函数形式) + const labelSlot = item.groupSlots ? { label: item.groupSlots } : undefined; return ( - + {this.renderOptionsContent(item.children)} ); diff --git a/src/select/select.en-US.md b/src/select/select.en-US.md index 73aaf9bc9..3674b2e02 100644 --- a/src/select/select.en-US.md +++ b/src/select/select.en-US.md @@ -95,7 +95,7 @@ value | String / Number | - | \- | N name | type | default | description | required -- | -- | -- | -- | -- divider | Boolean | true | \- | N -label | String | - | \- | N +label | String / Slot / Function | - | Group alias。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N ### TScroll diff --git a/src/select/select.md b/src/select/select.md index e41ea2d07..71be5e4b1 100644 --- a/src/select/select.md +++ b/src/select/select.md @@ -95,7 +95,7 @@ value | String / Number | - | 选项值 | N 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- divider | Boolean | true | 是否显示分隔线 | N -label | String | - | 分组别名 | N +label | String / Slot / Function | - | 分组别名。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N ### TScroll