Merge pull request #560 from Tencent/fix/cascader/ellipsis

fix: cascader ellipisis tooltip
Tencent · Mar 16, 2022 · 65c632e · 65c632e
2 parents d9caf1f + d3af7d0
commit 65c632e
Showing 1 changed file with 12 additions and 12 deletions.
diff --git a/src/cascader/components/Item.tsx b/src/cascader/components/Item.tsx
@@ -32,7 +32,9 @@ export default mixins(keepAnimationMixins).extend({
   name,
 
   directives: { ripple },
-
+  components: {
+    Tooltip,
+  },
   props: {
     node: {
       type: Object as PropType<CascaderItemPropsType['node']>,
@@ -107,21 +109,19 @@ export default mixins(keepAnimationMixins).extend({
     function RenderLabelContent(node: TreeNode, cascaderContext: CascaderContextType) {
       const label = RenderLabelInner(node, cascaderContext);
       const isEllipsis = getLabelIsEllipsis(node, cascaderContext.size);
-      if (isEllipsis) {
-        return (
-          <span class={`${ComponentClassName}-label`} role="label">
-            {label}
-            <div class={`${ComponentClassName}-label--ellipsis`}>
-              <Tooltip content={node.label} placement="top-left" />
-            </div>
-          </span>
-        );
-      }
-      return (
+      const labelNode = (
         <span class={[`${ComponentClassName}-label`]} role="label">
           {label}
         </span>
       );
+      if (isEllipsis) {
+        return (
+          <Tooltip content={node.label} placement="top-left">
+            {labelNode}
+          </Tooltip>
+        );
+      }
+      return labelNode;
     }
 
     function RenderCheckBox(