場景

使用ElementUI中的Table 表格時，如果列內容超過列寬，會默認換行，如下

這樣看起來不美觀，還有可能引起其它樣式問題。那么如何解決呢？

方式一

使用Table組件自帶的show-overflow-tooltip屬性

參數說明類型可選值默認值

show-overflow-tooltip	當內容過長被隱藏時顯示 tooltip	Boolean	—	false

添加該屬性之后，如果內容超出列寬，超長部分會默認省略。當鼠標滑過該內容時，會彈出Tip提示

<!--示例--> <el-table-columnprop="departName"label="部門"show-overflow-tooltip> </el-table-column>

注：該屬性謹慎使用，如果多列使用且內容較多時，會影響頁面性能

方式二

計算每列最大寬度，使內容不換行；配合設置最大字符長度，可以解決大多數場景問題。接下來展示最基礎的列寬計算方式

• 示例如下

/*** 使用span標簽包裹內容，然后計算span的寬度 width： px* @param valArr*/function getTextWidth(str) {let padding = 0;//單元格左右padding距離let width = 0;let span = document.createElement('span');span.innerText = str;span.className = 'getwidth';document.querySelector('body').appendChild(span);// 這里可以獲取當前單元格的font-size 以及 內容的中英文、字母等 做更精確的計算width = document.querySelector('.getwidth').offsetWidth+padding;document.querySelector('.getwidth').remove();return width; }/** * 遍歷列的所有內容，獲取最寬一列的寬度 * @param {Array} arr 需要計算的數據 * @param {Number} minwidth 列最小寬度 */ function getMaxLength (arr,minwidth=60) {return arr.reduce((acc, item) => {if (item) {let calcLen = getTextWidth(item);if (acc < calcLen) {acc = calcLen;}}return acc<minwidth?minwidth:acc;}, 0) }/** * @description 計算列表列寬（把內容撐開） * @param {Array} columns 列的數組 * @param {Array} tableArr 列表的數組 * */ function calcColumnsWidth(columns, tableArr) {columns.forEach((item) => {const arr = tableArr.map((x) => x[item.props]);item.width = getMaxLength(arr);arr.push(item.label); // 把每列的表頭也加進去算});return columns; }<!--獲取列表數據之后，計算每列最大寬度--> let res = await this.axios.post('/api/xxx/xxxx'); if(res.data.data.length > 0){const columns = calcColumnsWidth(this.tableHead, res.data.data);this.tableHead = columns; }

• 效果如下：列寬自動撐開，列表寬度不夠時，底部會出現滾動軸。
  

總結

以上是生活随笔為你收集整理的el-table-column 内容不自动换行的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。