方案一

• 表格加table-layout='auto’屬性
• 表格加tableAuto類名
• el-table-column標(biāo)簽不設(shè)置寬度

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

設(shè)置超出不折行

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

弊端：
1.el-table-column左側(cè)多個(gè)列加fixed屬性，左右滑動(dòng)，列寬得提前計(jì)算
2.el-table設(shè)置table-layout='auto’屬性并設(shè)置表格高度，表頭不能固定

方案二（推薦）

此方案能避免方案一的兩個(gè)弊端，不影響其他屬性，有利于功能拓展
el-table-column加width屬性

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

canvas動(dòng)態(tài)計(jì)算el-table-column寬度

/*** flexWidth* @param prop 每列的prop 可傳''* @param tableData 表格數(shù)據(jù)* @param title 標(biāo)題長(zhǎng)內(nèi)容短的，傳標(biāo)題 可不傳* @param num 列中有標(biāo)簽等加的富余量* @returns 列的寬度* 注：prop,title有一個(gè)必傳*/ flexWidth(prop, tableData, title, num = 0) {if (tableData.length === 0 ) {//表格沒數(shù)據(jù)不做處理return;}let flexWidth = 0;//初始化表格列寬let columnContent = '';//占位最寬的內(nèi)容let canvas = document.createElement("canvas");let context = canvas.getContext("2d");context.font = "14px Microsoft YaHei";if ((prop === '') && title) {//標(biāo)題長(zhǎng)內(nèi)容少的，取標(biāo)題的值,columnContent = title} else {// 獲取該列中占位最寬的內(nèi)容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]//比較占位最寬的值跟標(biāo)題、標(biāo)題為空的留出四個(gè)位置const column_w = context.measureText(columnContent).widthconst title_w = context.measureText(title).widthif (column_w < title_w) {columnContent = title || '留四個(gè)字'}}// 計(jì)算最寬內(nèi)容的列寬let width = context.measureText(columnContent);flexWidth = width.width + 40 + numreturn flexWidth + 'px'; }

總結(jié)

以上是生活随笔為你收集整理的elementUI 表格宽度自适应、不换行的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。