WHAT - Table 表格组件实践 - 文案过长时气泡，宽度足够时隐藏气泡

在 pro-table 组件中，悬浮展示气泡（Tooltip）功能通常用于当列宽度不足以显示完整内容时显示完整内容，而没有省略号时则不会显示气泡。这个功能通常涉及到动态计算列的宽度以及条件渲染 Tooltip。

以下是实现这个功能的一般步骤：

1. 确定列的宽度：
   需要检查列的实际渲染宽度与列内容的宽度进行比较，以确定内容是否被截断。

2. 条件渲染 Tooltip：
   仅在内容被截断时才显示 Tooltip，否则不显示。

实现步骤

1. 使用 CSS 进行样式控制：
   利用 CSS 控制当内容过长时如何处理，例如使用 text-overflow: ellipsis; 和 white-space: nowrap; 来处理省略号显示。

2. 计算内容是否被截断：
   通过 JavaScript 计算实际宽度，或使用 offsetWidth 和 scrollWidth 来判断内容是否被截断。

3. 动态渲染 Tooltip：
   结合计算结果动态决定是否渲染 Tooltip。

示例代码

以下是一个实现的示例代码，使用 React 和 Ant Design 的 Tooltip 组件：

import React, { useRef, useState, useEffect } from 'react';
import { Tooltip } from 'antd';
import 'antd/dist/antd.css'; // 引入 Ant Design 的样式

const TableCell = ({ content }) => {
  const cellRef = useRef(null);
  const [showTooltip, setShowTooltip] = useState(false);

  useEffect(() => {
    const checkOverflow = () => {
      if (cellRef.current) {
        // 判断内容是否被截断
        setShowTooltip(cellRef.current.scrollWidth > cellRef.current.offsetWidth);
      }
    };
    
    checkOverflow();
    window.addEventListener('resize', checkOverflow); // 监听窗口大小变化

    return () => window.removeEventListener('resize', checkOverflow);
  }, [content]);

  return (
    <Tooltip title={showTooltip ? content : ''} overlayStyle={{ whiteSpace: 'nowrap' }}>
      <div
        ref={cellRef}
        style={{
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          maxWidth: '150px', // 设置最大宽度
        }}
      >
        {content}
      </div>
    </Tooltip>
  );
};

const App = () => {
  const data = [
    { name: 'Short Name', description: 'This is a short description' },
    { name: 'Long Name', description: 'This is a very long description that will overflow and need to be truncated' },
  ];

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => (
            <tr key={index}>
              <td><TableCell content={item.name} /></td>
              <td><TableCell content={item.description} /></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default App;

解释

• cellRef：引用表格单元格的 DOM 节点，用于计算实际宽度。
• showTooltip：状态变量，用于确定是否显示 Tooltip。
• checkOverflow：函数用于判断内容是否被截断。
• Tooltip：只有在内容被截断时才显示 Tooltip。

这个示例中，TableCell 组件会根据单元格内容的实际宽度决定是否显示 Tooltip。当单元格内容被截断时，showTooltip 被设置为 true，Tooltip 组件才会显示。当内容没有被截断时，Tooltip 不会被渲染。