【antd 3.x】表格溢出打点和鼠标悬浮显示数据

小新a

于 2020-11-03 16:12:49 发布

阅读量1.9k

点赞数

文章标签： react js css

本文链接：https://blog.youkuaiyun.com/qq_39691383/article/details/109471095

版权

本文介绍了在Ant Design 3.x中处理表格数据溢出的方法，通过在columns设置特定属性实现打点和鼠标悬浮显示。同时，文章指出了这种方法在浏览器窗口调整大小时的响应问题，并提供了一个优化方案，涉及到中英文字符宽度的计算，以确保数据能适应表格列宽的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法使用

1、在表格的columns的列中使用该方法，传递相应的参数

// 表格列，在需要地方引用
const columns=[
...
  {
      title: '事由说明',
      dataIndex: 'reason',
      key: 'reason',
      width: 250,
      align: 'left',
      render: (text, record) => overflowTooltip(record.reason, 250,1140),
    },
   ]

2、结果显示
在这里插入图片描述
3、具体实现方法

// 表格的溢出打点显示和鼠标悬浮显示所有内容
/*
 * record（必传）：需要显示悬浮框的表格列的数据内容
 * width（可选）:该表格列的宽度，可设置一个初始值
 * allWidth（可选）：当给表格每一列设置了固定宽度，表格固定的总宽度
 * fontSize(可选)：表格中的文字大小，可设置一个初始值
 */
export function overflowTooltip(record = [], width = 268, allWidth,fontSize=12) {

  const extraWidth = 230;   // 浏览器页面中除表格外的宽度（自行计算得到）
  
  // 浏览器页面宽度下 按比例 的表格宽度
  const pageWidth = do