动态计算表格列宽度

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

/**
 * dynamicCalculationWidth 动态计算宽度(ElTable列宽)
 * 实现 table 单元格内容强制不换行
 * 注：prop,title有一个必传
 * @author 小沐沐吖 <sunnyboy_mu@163.com>
 * @license Apache-2.0
 * @param { string | number } title 标题
 * @param { array } tableData 表格数据
 * @param { string | null } prop 每列的prop
 * @param { number } num 列中有标签等加的富余量
 * @param { number } fontSize 字体大小，默认 14
 * @returns 每列的宽度
 * @file table-util.js
 */
export const dynamicCalculationWidth = (
  title = '',
  tableData = [],
  prop = '',
  num = 0,
  fontSize = 14
) => {
  let flexWidth = 0; // 初始化表格列宽
  ctx.font = `${fontSize}px Microsoft YaHei`;
  const dataLength = tableData.length;
  if (!title && !dataLength) {
    // title 与 tableData 都无数据 不做处理
    return;
  }

  if (!!title && !!dataLength) {
    // title 与 tableData 都有数据
    flexWidth = Math.max(
      ctx.measureText(title).width,
      findMaxWidthColText(tableData, prop)
    );
  } else if (!!title && !dataLength) {
    // title 有数据，tableData 没有数据
    flexWidth = ctx.measureText(title).width;
  } else if (!title && !!dataLength) {
    // title 没有数据，tableData 有数据
    flexWidth = findMaxWidthColText(tableData, prop);
  }
  return flexWidth + 40 + num + 'px';
};

/**
 * @param { array } data
 * @param { string } prop
 */
function findMaxWidthColText(data, prop) {
  const colTextWidthArr = data.map((item) => {
    return ctx.measureText(String(item[prop])).width;
  });
  return Math.max(...colTextWidthArr);
}