计算宽度方法

如果不想文字太多把表格高度撑开导致不美观，可以使用计算自适应表格宽度的方法

• prop：列对应的字段名，用于获取单元格内容
• tableData：表格数据数组，包含所有行的内容
• title：列的标题文本
• num：额外增加的宽度（可选，默认 0）

const flexWidth = (prop: string, tableData: any[], title: string, num = 0) => {
  // 如果表格没有数据，直接返回（无需计算）
  if (tableData.length === 0) return;
  
  let flexWidth = 0; // 最终计算的宽度
  let columnContent = ''; // 用于计算宽度的参考文本
  const canvas = document.createElement("canvas"); // 创建临时画布
  const context = canvas.getContext("2d"); // 获取画布上下文（用于测量文本）
  
  if (!context) return; // 如果浏览器不支持canvas，直接返回
  
  // 设置文本样式（需与页面中表格文字样式一致，否则测量不准）
  context.font = "14px SC-N";
  
  // 情况1：如果没有指定字段（prop为空），直接用标题作为参考文本
  if ((prop === '') && title) {
    columnContent = title;
  } else {
    // 情况2：有字段时，找到该字段下最长的内容
    let index = 0; // 记录最长内容所在的行索引
    for (let i = 0; i < tableData.length; i++) {
      // 当前行的内容（数组会拼接成字符串）
      const nowTemp = Array.isArray(tableData[i][prop])
        ? tableData[i][prop].join('、') + ''
        : (tableData[i][prop] || '') + '';
      
      // 目前已知的最长内容
      const maxTemp = Array.isArray(tableData[index][prop])
        ? tableData[index][prop].join('、') + ''
        : (tableData[index][prop] || '') + '';
      
      // 测量当前内容和最长内容的宽度
      const nowTempWidth = context.measureText(nowTemp).width;
      const maxTempWidth = context.measureText(maxTemp).width;
      
      // 如果当前内容更长，更新最长内容的索引
      if (nowTempWidth > maxTempWidth) {
        index = i;
      }
    }
    
    // 取出最长的内容作为参考文本
    columnContent = Array.isArray(tableData[index][prop])
      ? tableData[index][prop].join('、')
      : (tableData[index][prop] || '');
    
    // 如果内容宽度小于标题宽度，用标题作为参考（确保标题能完整显示）
    const columnWidth = context.measureText(columnContent).width;
    const titleWidth = context.measureText(title).width;
    if (columnWidth < titleWidth) {
      columnContent = title || '留四个字';
    }
  }
  
  // 计算最终宽度：内容宽度 + 40px留白 + 额外宽度
  const width = context.measureText(columnContent);
  flexWidth = width.width + 40 + num;
  return `${flexWidth}px`; // 返回带单位的宽度字符串
};

调用：

width: flexWidth('列对应的字段名', 表格数据数组, "标题")