場景

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

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

方式一

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

參數(shù)說明類型可選值默認(rèn)值

show-overflow-tooltip	當(dāng)內(nèi)容過長被隱藏時顯示 tooltip	Boolean	—	false

添加該屬性之后，如果內(nèi)容超出列寬，超長部分會默認(rèn)省略。當(dāng)鼠標(biāo)滑過該內(nèi)容時，會彈出Tip提示

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

注：該屬性謹(jǐn)慎使用，如果多列使用且內(nèi)容較多時，會影響頁面性能

方式二

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

• 示例如下

/*** 使用span標(biāo)簽包裹內(nèi)容，然后計算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);// 這里可以獲取當(dāng)前單元格的font-size 以及 內(nèi)容的中英文、字母等 做更精確的計算width = document.querySelector('.getwidth').offsetWidth+padding;document.querySelector('.getwidth').remove();return width; }/** * 遍歷列的所有內(nèi)容，獲取最寬一列的寬度 * @param {Array} arr 需要計算的數(shù)據(jù) * @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 計算列表列寬（把內(nèi)容撐開） * @param {Array} columns 列的數(shù)組 * @param {Array} tableArr 列表的數(shù)組 * */ function calcColumnsWidth(columns, tableArr) {columns.forEach((item) => {const arr = tableArr.map((x) => x[item.props]);item.width = getMaxLength(arr);arr.push(item.label); // 把每列的表頭也加進(jìn)去算});return columns; }<!--獲取列表數(shù)據(jù)之后，計算每列最大寬度--> 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; }

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

總結(jié)

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

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