[CTable] 解决文字超长展示省略号的计算逻辑有误的问题

liyuan-meng · liyuan-meng · commit 0a178a4c0f61 · 2024-05-23T15:13:59.000+08:00
diff --git a/src/components/c-table/columnTpl/link.js b/src/components/c-table/columnTpl/link.js
@@ -1,17 +1,17 @@
 import React, { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { prefixCls } from '@utils';
-import { getTextWidth, isVoid } from '../util';
+import { isVoid } from '../util';
 import Tooltip from '../../tooltip';
 import './index.less';
 
-export default function LinkTpl({ value, row, linkKey, link }) {
+export default function LinkTpl({ value, row, linkKey, link, onClick }) {
   const ref = useRef();
   const [tooltipContent, setTooltipContent] = useState('');
 
   useEffect(() => {
     if (!isVoid(value)) {
-      if (ref.current.clientWidth <= getTextWidth(value)) {
+      if (ref.current.scrollWidth > ref.current.clientWidth) {
         setTooltipContent(value);
       }
     }
@@ -27,6 +27,10 @@ export default function LinkTpl({ value, row, linkKey, link }) {
         ref={ref}
         className={`${prefixCls}-table-column-tpl-link`}
         onClick={() => {
+          if (onClick) {
+            onClick();
+            return;
+          }
           if (link || row?.[linkKey]) {
             window.open(link || row?.[linkKey]);
           }
diff --git a/src/components/c-table/columnTpl/multiLink.js b/src/components/c-table/columnTpl/multiLink.js
@@ -1,17 +1,17 @@
 import React, { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { prefixCls } from '@utils';
-import { getTextWidth, isVoid } from '../util';
+import { isVoid } from '../util';
 import Tooltip from '../../tooltip';
 import './index.less';
 
-export default function MultiLinkTpl({ value, row, linkKey }) {
+export default function MultiLinkTpl({ value, row, linkKey, onClick }) {
   const ref = useRef();
   const [tooltipContent, setTooltipContent] = useState('');
 
   useEffect(() => {
     if (!isVoid(value)) {
-      if (ref.current.clientWidth * 2 <= getTextWidth(value)) {
+      if (ref.current.scrollHeight > ref.current.clientHeight) {
         setTooltipContent(value);
       }
     }
@@ -27,6 +27,10 @@ export default function MultiLinkTpl({ value, row, linkKey }) {
         ref={ref}
         className={`${prefixCls}-table-column-tpl-multi-link`}
         onClick={() => {
+          if (onClick) {
+            onClick();
+            return;
+          }
           if (row?.[linkKey]) {
             window.open(row?.[linkKey]);
           }
diff --git a/src/components/c-table/columnTpl/multiText.js b/src/components/c-table/columnTpl/multiText.js
@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { prefixCls } from '@utils';
-import { getTextWidth, isVoid } from '../util';
+import { isVoid } from '../util';
 import Tooltip from '../../tooltip';
 import './index.less';
 
@@ -11,7 +11,7 @@ export default function MultiTextTpl({ value }) {
 
   useEffect(() => {
     if (!isVoid(value)) {
-      if (ref.current.clientWidth * 2 <= getTextWidth(value)) {
+      if (ref.current.scrollHeight > ref.current.clientHeight) {
         setTooltipContent(value);
       }
     }
diff --git a/src/components/c-table/columnTpl/text.js b/src/components/c-table/columnTpl/text.js
@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { prefixCls } from '@utils';
-import { getTextWidth, isVoid } from '../util';
+import { isVoid } from '../util';
 import Tooltip from '../../tooltip';
 import './index.less';
 
@@ -11,7 +11,7 @@ export default function TextTpl({ value }) {
 
   useEffect(() => {
     if (!isVoid(value)) {
-      if (ref.current.clientWidth <= getTextWidth(value)) {
+      if (ref.current.scrollWidth > ref.current.clientWidth) {
         setTooltipContent(value);
       }
     }
diff --git a/src/components/c-table/demos/uniform_text.md b/src/components/c-table/demos/uniform_text.md
@@ -20,14 +20,15 @@ const data = [
   { id: '121408294', name: '文本文本超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长', url: 'https://www.taobao.com', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan' },
   { id: '121407191', name: '文本文本文本文本文本3', url: 'https://www.taobao.com', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo' },
   { id: '121407192', name: '文本文本4', url: '', createTime: '2021/12/13 11:03:07', creator: 'han.wu' },
+  { id: '121407199', name: 'koookoooko-20240520000-20240520000', url: '', createTime: '2021/12/13 11:03:07', creator: 'han.wu' },
   { id: '', name: '', url: '', createTime: '', creator: '' },
 ];
 
 const columns = [
   {
     title: '单行文本',
     dataIndex: 'name',
-    width: 120,
+    width: 100,
     type: 'TEXT'
   },
   {
@@ -42,7 +43,7 @@ const columns = [
   {
     title: '多行文本',
     dataIndex: 'name',
-    width: 200,
+    width: 100,
     type: 'MULTI_TEXT'
   },
   {
diff --git a/src/components/c-table/demos/uniform_tpl.md b/src/components/c-table/demos/uniform_tpl.md
@@ -109,7 +109,12 @@ const columns = [
     dataIndex: 'name',
     width: 120,
     render: (val, row) => {
-      return <CTable.LinkTpl value={val} link="https://www.taobao.com" />
+      return <CTable.LinkTpl
+        value={val}
+        onClick={() => {
+          window.open("https://www.taobao.com")
+        }}
+      />
     }
   },
   {
@@ -125,7 +130,12 @@ const columns = [
     dataIndex: 'name',
     width: 120,
     render: (val, row) => {
-      return <CTable.MultiLinkTpl value={val} link="https://www.taobao.com" />
+      return <CTable.MultiLinkTpl
+        value={val}
+        onClick={() => {
+          window.open("https://www.taobao.com")
+        }}
+      />
     }
   },
   {
diff --git a/src/components/c-table/index.md b/src/components/c-table/index.md
@@ -220,8 +220,9 @@ this.tableRef.current.setColumn(columnData, isReloadGrid?);
 | 属性                | 说明                                         | 类型                        | 默认值           |
 | ------------------- | -------------------------------------------- | --------------------------- | ---------------- |
 | value            | 展示值，使用组件的形式必传，使用 typeConfig 忽略次字段             | string                 | -                |
-| typeConfig.linkKey            | 链接 key             | string                 | ''                |
+| typeConfig.linkKey            | 链接 key（取自 row 中的字段）             | string                 | ''                |
 | typeConfig.link            | 链接值             | string                 | ''                |
+| typeConfig.onClick            | 点击链接的回调函数             | func                 | -                |
 
 **（5）type 为 标签类型-`TAG`**
 （_可根据下表配置 typeConfig，查看 [Demo](https://cloud-react.shuyun.com/v1/cloud-react/data/c-table#标准化表格-标签类型)；也可以使用组件形式 <Table.TagTpl/>，查看 [Demo](https://cloud-react.shuyun.com/v1/cloud-react/data/c-table#标准化表格-使用列模板形式)_）

Original file line number	Diff line number	Diff line change
`@@ -20,14 +20,15 @@ const data = [`
`20`	`20`	`{ id: '121408294', name: '文本文本超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长', url: 'https://www.taobao.com', createTime: '2021/12/13 11:14:40', creator: 'xiaotong.fan' },`
`21`	`21`	`{ id: '121407191', name: '文本文本文本文本文本3', url: 'https://www.taobao.com', createTime: '2021/12/13 11:03:05', creator: 'zhenxiao.guo' },`
`22`	`22`	`{ id: '121407192', name: '文本文本4', url: '', createTime: '2021/12/13 11:03:07', creator: 'han.wu' },`
	`23`	`+ { id: '121407199', name: 'koookoooko-20240520000-20240520000', url: '', createTime: '2021/12/13 11:03:07', creator: 'han.wu' },`
`23`	`24`	`{ id: '', name: '', url: '', createTime: '', creator: '' },`
`24`	`25`	`];`
`25`	`26`
`26`	`27`	`const columns = [`
`27`	`28`	`{`
`28`	`29`	`title: '单行文本',`
`29`	`30`	`dataIndex: 'name',`
`30`		`- width: 120,`
	`31`	`+ width: 100,`
`31`	`32`	`type: 'TEXT'`
`32`	`33`	`},`
`33`	`34`	`{`
`@@ -42,7 +43,7 @@ const columns = [`
`42`	`43`	`{`
`43`	`44`	`title: '多行文本',`
`44`	`45`	`dataIndex: 'name',`
`45`		`- width: 200,`
	`46`	`+ width: 100,`
`46`	`47`	`type: 'MULTI_TEXT'`
`47`	`48`	`},`
`48`	`49`	`{`