el-table表格宽度自适应

最新推荐文章于 2025-06-19 19:58:33 发布

小刚科技站

最新推荐文章于 2025-06-19 19:58:33 发布

阅读量438

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/summer371/article/details/148283210

根据table列表内容的字数自适应列表宽度

js代码

/**
 * 表格列宽自适应
 * @param prop 属性
 * @param records 数据
 * @param minWidth 最小宽度 
 */
const getColumnWidth = (prop: string, records: any, minWidth = 120) => {
  const padding = 12; // 列内边距

  const contentWidths = records.map((item: any) => {
    const value = item[prop] ? String(item[prop]) : "";

    const textWidth = getTextWidth(value);
    return textWidth + padding;
  });

  const maxWidth = Math.max(...contentWidths);
  return Math.max(minWidth, maxWidth);
}
/**
 * el-table扩展工具  -- 列宽度自适应 - 获取列宽内文本宽度
 * @param {*} text 文本内容
 * @returns 文本宽度(int)
 */
const getTextWidth = (text: string) => {
  const span = document.createElement("span");
  span.style.visibility = "hidden";
  span.style.position = "absolute";
  span.style.top = "-9999px";
  span.style.whiteSpace = "nowrap";
  span.style.fontSize = "16px";
  span.innerText = text;
  document.body.appendChild(span);
  const width = span.offsetWidth + 16;
  document.body.removeChild(span);
  return width;
}

vue代码

<el-table :data="tableData" stripe>
   <el-table-column v-for="(column, index) in tableColumns" :key="index" :prop="column?.prop":label="column?.label"   align="center" :width="getColumnWidth(column.prop, tableData)">
    </el-table-column>
</el-tabe>