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

方法使用

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 = document.body.clientWidth - extraWidth ; 
  
  // 当宽度比固定宽度大 计算分配自适应宽度 的表格宽度，如没传第三个参数，则不计算
  // 【注：当页面宽度大于表格固定宽度时，多出的宽度会按照每一列所占的比列进行分配】
  const rowWidth = allWidth ? Math.floor((width / allWidth) * pageWidth) : width;
  
  // 悬浮框的样式
  const reasonPop = {
    width: rowWidth - 28,
    wordWrap: 'break-word',
    wordBreak: 'break-all',
  };
  const reason = {
    display: 'block',
    width: rowWidth - 16,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
  };
  // 计算一行最多能容纳的字数
  const num = Math.floor(rowWidth / fontSize);
  return (
    <>
      {record?.length > num ? (
        <Popover overlayStyle={{ rowWidth }} content={<div style={reasonPop}>{record}</div>}>
          <span style={reason}>{record}</span>
        </Popover>
      ) : (
        <span style={reason}>{record}</span>
      )}
    </>
  );
}

上述方法有一个缺点，在拉动浏览器窗口导致页面中表格列放大or缩小的过程中，该溢出打点样式处理不会自动响应表格列宽度，会使得数据溢出表格列等现象。
代码优化更新为

// 处理表格要超出【一行】打点显示的效果,一般用于列表的表格，【宽度会动态变化】的情况下【新方法】
// 也支持表格宽度固定的时候显示一行打点
/**
 * @param {显示的数据} record
 * @param {该列宽度所占百分比，或小数} precent
 * @param {固定的表格总宽度} width
 */
export const getOneLineOverFlowByDynamicWidth = (record, precent, width) => {
  let colWidth = 0;
  if (width) {
    // precent可传百分比（50）或小数（0.5）的格式
    if (precent && precent > 1) {
      colWidth = Math.floor((width * precent) / 100);
    }
    if (precent && precent < 1) {
      colWidth = Math.floor(width * precent);
    }
  } else {
    // 获取到表格动态变化or固定的宽度
    const tableDom = document.querySelectorAll('.ant-table')[0];
    const tableWidth = tableDom?.clientWidth;
    // 根据对应表格列所占比例，计算该列宽度
    if (precent && precent > 1) {
      colWidth = Math.floor((tableWidth * precent) / 100);
    }
    if (precent && precent < 1) {
      colWidth = Math.floor(tableWidth * precent);
    }
  }

  // 悬浮框的样式
  const reasonPop = {
    width: colWidth - 28,
    wordWrap: 'break-word',
    wordBreak: 'break-all',
    whiteSpace: 'pre-wrap',
  };
  // 字数溢出打点显示
  const oneRowOverflowStyle = {
    display: 'inline-block',
    width: colWidth,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
  };
  const isOver = calculateIsOverflowOneRow(record, colWidth); // 调用方法判断该列数据是否溢出
  return (
    <>
      {isOver ? (
        <Popover overlayStyle={{ colWidth }} content={<div style={reasonPop}>{record}</div>}>
          <span style={oneRowOverflowStyle}>{record}</span>
        </Popover>
      ) : (
        <span>{record}</span>
      )}
    </>
  );
};

这里使用到了一个计算数据宽度的方法，兼容中英文字符

/**
 * @param {需要计算的数据，字符串} record
 * @param {允许的宽度} width
 * @returns
 */
const calculateIsOverflowOneRow = (record, width) => {
  const len = record?.length || 0;
  const zhArr = [];
  const enArr = [];
  for (let i = 0; i < len; i++) {
    // 中文字符等
    if (record.charCodeAt(i) > 255) {
      zhArr.push(record[i]);
    } else {
      // 英文字符等
      enArr.push(record[i]);
    }
  }
  const oneRowWidth = zhArr?.length * 12 + enArr?.length * 7;// 这里 12 和 7 取的是中文字符和英文字符的宽度，可根据项目需求自行修改（这只是一个大概的值）
  return oneRowWidth > width;
};