方案一
表格加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).widthconst max_temp_w = context.measureText(max_temp).widthif (now_temp_w > max_temp_w) {index = i;}}columnContent = tableData[index][prop]//比较占位最宽的值跟标题、标题为空的留出四个位置const column_w = context.measureText(columnContent).widthconst title_w = context.measureText(title).widthif (column_w < title_w) {columnContent = title || '留四个字'}}// 计算最宽内容的列宽let width = context.measureText(columnContent);flexWidth = width.width + 40 + numreturn flexWidth + 'px';}
