首頁 > 軟體

el-table-column 內容不自動換行的解決方法

2022-08-14 14:00:29

場景

使用ElementUI中的Table 表格時,如果列內容超過列寬,會預設換行,如下

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

方式一

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

引數說明型別可選值預設值show-overflow-tooltip當內容過長被隱藏時顯示 tooltipBoolean—false

新增該屬性之後,如果內容超出列寬,超長部分會預設省略。當滑鼠滑過該內容時,會彈出Tip提示

<!--範例-->
<el-table-column
     prop="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 內容不自動換行的解決方法的文章就介紹到這了,更多相關el-table-column 不自動換行內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com