feat: add optional ellipse to cascader options

src/_internal/select-menu/src/SelectMenu.tsx

@@ -84,6 +84,10 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
+    showEllipse: {
+      type: Boolean as PropType<boolean | undefined>,
+      default: false
+    },
     labelField: {
       type: String,
       default: 'label'
@@ -423,6 +427,7 @@ export default defineComponent({
     }
     useOnResize(selfRef, props.onResize)
     return {
+      showEllipse: props.showEllipse,
       mergedTheme: themeRef,
       mergedClsPrefix: mergedClsPrefixRef,
       rtlEnabled: rtlEnabledRef,
@@ -543,6 +548,7 @@ export default defineComponent({
                           />
                         ) : tmNode.ignored ? null : (
                           <NSelectOption
+                            showEllipse={this.showEllipse}
                             clsPrefix={clsPrefix}
                             key={tmNode.key}
                             tmNode={tmNode as unknown as TreeNode<SelectOption>}
@@ -570,6 +576,7 @@ export default defineComponent({
                         />
                       ) : (
                         <NSelectOption
+                          showEllipse={this.showEllipse}
                           clsPrefix={clsPrefix}
                           key={tmNode.key}
                           tmNode={tmNode as unknown as TreeNode<SelectOption>}

src/_internal/select-menu/src/SelectOption.tsx

@@ -5,6 +5,7 @@ import type { RenderLabelImpl, RenderOptionImpl } from './interface'
 import { useMemo } from 'vooks'
 import { defineComponent, h, inject, Transition } from 'vue'
 import { mergeEventHandlers, render } from '../../../_utils'
+import { NEllipsis } from '../../../ellipsis'
 import { NBaseIcon } from '../../icon'
 import { CheckmarkIcon } from '../../icons'
 import { internalSelectionMenuInjectionKey } from './interface'
@@ -39,6 +40,10 @@ export default defineComponent({
     tmNode: {
       type: Object as PropType<TreeNode<SelectOption>>,
       required: true
+    },
+    showEllipse: {
+      type: Boolean as PropType<boolean | undefined>,
+      default: false
     }
   },
   setup(props) {
@@ -88,6 +93,7 @@ export default defineComponent({
         const { parent } = tmNode
         return parent && parent.rawNode.type === 'group'
       }),
+      showEllipse: props.showEllipse,
       showCheckmark: showCheckmarkRef,
       nodeProps: nodePropsRef,
       isPending: isPendingRef,
@@ -165,7 +171,13 @@ export default defineComponent({
         ])}
         onMousemove={mergeEventHandlers([handleMouseMove, attrs?.onMousemove])}
       >
-        <div class={`${clsPrefix}-base-select-option__content`}>{children}</div>
+        <div class={`${clsPrefix}-base-select-option__content`}>
+          {this.showEllipse ? (
+            <NEllipsis tooltip={{ to: 'body' }}>{children}</NEllipsis>
+          ) : (
+            children
+          )}
+        </div>
       </div>
     )
     return rawNode.render

src/cascader/src/Cascader.tsx

@@ -127,6 +127,10 @@ export const cascaderProps = {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
+  showEllipse: {
+    type: Boolean as PropType<boolean | undefined>,
+    default: false
+  },
   maxTagCount: [String, Number] as PropType<number | 'responsive'>,
   ellipsisTagPopoverProps: Object as PropType<PopoverProps>,
   menuProps: Object as PropType<HTMLAttributes>,
@@ -925,6 +929,7 @@ export default defineComponent({
       hoverKeyPathRef,
       mergedCheckStrategyRef,
       showCheckboxRef,
+      showEllipseRef: toRef(props, 'showEllipse'),
       cascadeRef: toRef(props, 'cascade'),
       multipleRef: toRef(props, 'multiple'),
       keyboardKeyRef,

src/cascader/src/CascaderOption.tsx

@@ -6,6 +6,7 @@ import { computed, defineComponent, h, inject, Transition } from 'vue'
 import { NBaseIcon, NBaseLoading } from '../../_internal'
 import { CheckmarkIcon, ChevronRightIcon } from '../../_internal/icons'
 import { NCheckbox } from '../../checkbox'
+import { NEllipsis } from '../../ellipsis'
 import { cascaderInjectionKey } from './interface'
 
 export default defineComponent({
@@ -34,6 +35,7 @@ export default defineComponent({
       mergedThemeRef,
       labelFieldRef,
       showCheckboxRef,
+      showEllipseRef,
       renderPrefixRef,
       renderSuffixRef,
       updateHoverKey,
@@ -167,6 +169,7 @@ export default defineComponent({
       keyboardPending: keyboardPendingRef,
       isLoading: isLoadingRef,
       showCheckbox: showCheckboxRef,
+      showEllipse: showEllipseRef,
       isLeaf: isLeafRef,
       disabled: disabledRef,
       label: labelRef,
@@ -286,9 +289,13 @@ export default defineComponent({
       >
         {prefixNode}
         <span class={`${mergedClsPrefix}-cascader-option__label`}>
-          {renderLabel
-            ? renderLabel(this.tmNode.rawNode, this.checked)
-            : this.label}
+          {renderLabel ? (
+            renderLabel(this.tmNode.rawNode, this.checked)
+          ) : this.showEllipse ? (
+            <NEllipsis>{this.label}</NEllipsis>
+          ) : (
+            this.label
+          )}
         </span>
         {suffixNode}
       </div>

src/cascader/src/CascaderSelectMenu.tsx

@@ -59,6 +59,7 @@ export default defineComponent({
   },
   setup(props) {
     const {
+      showEllipseRef,
       isMountedRef,
       mergedValueRef,
       mergedClsPrefixRef,
@@ -171,6 +172,7 @@ export default defineComponent({
       enter
     }
     return {
+      showEllipse: showEllipseRef,
       isMounted: isMountedRef,
       mergedTheme: mergedThemeRef,
       mergedClsPrefix: mergedClsPrefixRef,
@@ -197,6 +199,7 @@ export default defineComponent({
                     clsPrefix={mergedClsPrefix}
                     class={`${mergedClsPrefix}-cascader-menu`}
                     autoPending
+                    showEllipse={this.showEllipse}
                     themeOverrides={
                       mergedTheme.peerOverrides.InternalSelectMenu
                     }

src/cascader/src/interface.ts

@@ -79,6 +79,7 @@ export interface CascaderInjection {
   optionHeightRef: Ref<string>
   labelFieldRef: Ref<string>
   showCheckboxRef: Ref<boolean>
+  showEllipseRef: Ref<boolean>
   getColumnStyleRef: Ref<
     ((detail: { level: number }) => string | CSSProperties) | undefined
   >