elementUI 表格宽度自适应、不换行

置顶垚~垚

已于 2025-03-06 14:00:47 修改

阅读量1.5w

点赞数 31

分类专栏： vue 文章标签： elementui vue.js vue3

于 2022-07-18 16:23:56 首次发布

本文链接：https://blog.youkuaiyun.com/luoyumeiluoyumei/article/details/125853152

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了两种解决表格列宽自动调整的方法。方案一通过设置`table-layout: auto`和不指定`el-table-column`宽度，但存在列宽计算困难和表头无法固定的问题。方案二通过`width`属性结合动态计算，有效避免了这些问题，实现了灵活的列宽调整，同时保持了表格功能的拓展性。

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

方案一

表格加table-layout='auto’属性
表格加tableAuto类名
el-table-column标签不设置宽度

 <el-table :data="tableData"  table-layout='auto' class="tableAuto">
     <el-table-column prop="name" label="名称" />
 </el-table>

设置超出不折行

.tableAuto.el-table .cell {
  white-space: nowrap;
}

弊端：
1.el-table-column左侧多个列加fixed属性，左右滑动，列宽得提前计算
2.el-table设置table-layout='auto’属性并设置表格高度，表头不能固定

方案二（推荐）

此方案能避免方案一的两个弊端，不影响其他属性，有利于功能拓展
el-table-column加width属性

 <el-table :data="tableData>
        <el-table-column label="名称" prop="name" :width="flexWidth('name',tableData,'名称')"/>
  </el-table :data="tableData>

canvas动态计算el-table-column宽度

/**
 * flexWidth
 * @param prop 每列的prop 可传''
 * @param tableData 表格数据
 * @param title 标题长内容短的，传标题  可不传
 * @param num 列中有标签等加的富余量
 * @returns 列的宽度
 * 注：prop,title有一个必传
 */
flexWidth(prop, tableData, title, num = 0) {
  if (tableData.length === 0 ) {//表格没数据不做处理
    return;
  }
  let flexWidth = 0;//初始化表格列宽
  let columnContent = '';//占位最宽的内容
  let canvas = document.createElement("canvas");
  let context = canvas.getContext("2d");
  context.font = "14px Microsoft YaHei";
  if ((prop === '') && title) {//标题长内容少的，取标题的值,
    columnContent = title
  } else {// 获取该列中占位最宽的内容
    let index = 0;
    for (let i = 0; i < tableData.length; i++) {
      const now_temp = tableData[i][prop] + '';
      const max_temp = tableData[index][prop] + '';
      const now_temp_w = context.measureText(now_temp).width
      const max_temp_w = context.measureText(max_temp).width
      if (now_temp_w > max_temp_w) {
        index = i;
      }
    }
    columnContent = tableData[index][prop]
    //比较占位最宽的值跟标题、标题为空的留出四个位置
    const column_w = context.measureText(columnContent).width
    const title_w = context.measureText(title).width
    if (column_w < title_w) {
      columnContent = title || '留四个字'
    }
  }
  // 计算最宽内容的列宽
  let width = context.measureText(columnContent);
  flexWidth = width.width + 40 + num
  return flexWidth + 'px';
}