feat(select): add slot support for label in optionGroup

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,

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<TdOptionGroupProps['label']>,
   },
 };

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<ClassName>(() => [
       `${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 (
       <li class={this.classes}>
-        {(this.label ?? false) && <div class={`${this.componentName}-option-group__header`}>{this.label}</div>}
+        {optionGroupLabel && <div class={`${this.componentName}-option-group__header`}>{optionGroupLabel}</div>}
         {children}
       </li>
     );

src/select/select-panel.tsx

@@ -100,11 +100,12 @@ export default defineComponent({
       const res: Array<SelectOption & { index?: number }> = [];
       // 动态赋予选项 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 (
-                  <t-option-group label={item.group} divider={item.divider}>
+                  <t-option-group label={item.group} divider={item.divider} scopedSlots={labelSlot}>
                     {this.renderOptionsContent(item.children)}
                   </t-option-group>
                 );

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
 

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