場景

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

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

方式一

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

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

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

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

方式二

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

• 示例如下

/**
 * 使用span標(biāo)簽包裹內(nèi)容，然后計(jì)算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)容的中英文、字母等  做更精確的計(jì)算
    width = document.querySelector('.getwidth').offsetWidth+padding;
    document.querySelector('.getwidth').remove();
    return width;
}

/**
* 遍歷列的所有內(nèi)容，獲取最寬一列的寬度
* @param {Array} arr 需要計(jì)算的數(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 計(jì)算列表列寬（把內(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ù)之后，計(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;
}

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