template

<el-table
    :data="tableData"
    ref="table"
    :cell-class-name="tableCellClassName"
    auto-fit-column>
    <el-table-column label="光亮" prop="guang" :width="getTableString('guang', tableData)"></el-table-column>
    <el-table-column label="清水河" prop="qing" :width="getTableString('qing', tableData)"></el-table-column>
    <el-table-column label="喜馬拉雅" prop="xi" :width="getTableString('xi', tableData)"></el-table-column>
    <el-table-column label="怕無歸期怕空歡喜怕沒有奇跡" prop="pawu" :width="getTableString('pawu', tableData)"></el-table-column>
    <el-table-column label="物理小甜甜" prop="sugar" :width="getTableString('sugar', tableData)"></el-table-column>


    <el-table-column label="小行星" prop="xing" :width="flexLabelWidth('小行星')"></el-table-column>
    <el-table-column label="mantian" prop="dou" :width="flexLabelWidth('mantian')"></el-table-column>
    <el-table-column label="拉薩布達拉" prop="la" :width="flexLabelWidth('拉薩布達拉')"></el-table-column>
    <el-table-column label="空歡喜怕沒有奇跡" prop="kong" :width="flexLabelWidth('空歡喜怕沒有奇跡')"></el-table-column>
</el-table>

data

data() {
    return {
        tableData:[
            {
                guang:"有了光才有了亮",
                qing:"河里魷魚否",
                xi:"喜歡吃吃吃",
                pawu:"總有奇跡",
                sugar:"糖好吃嗎",
                xing:"woiewkjksdlllfdks",
                dou:"28829",
                la:"39203-3-",
                kong:"290nslkds",
            },
            {
                guang:"有了你才有了我",
                qing:"是的",
                xi:"怕變胖胖",
                pawu:"總有奇跡",
                sugar:"巧克力",
                xing:"流行誰",
                dou:"28829",
                la:"39203-3-",
                kong:"290nslkds",
            }
        ],
    };
}

methods

/**
 * 獲取表格中的規(guī)定的字符串
 * @param prop
 * @param tableData
 * @param flag
 * @returns {string}
 */
getTableString(prop, tableData, flag = 'max') {
    // prop 為該列的字段名(傳字符串)，tableData 為該表格的數(shù)據(jù)源(傳變量)
    // flag 為可選值，可不傳該參數(shù)，傳參時可選 'max' 或 'equal'，默認(rèn)為 'max'
    // flag 為 'max' 則設(shè)置列寬適配該列中最長的內(nèi)容，flag 為 'equal' 則設(shè)置列寬適配該列中第一行內(nèi)容的長度
    prop = prop + '';
    let columnContent = '';
    if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
        return
    }
    if (!prop || !prop.length || prop.length === 0 || prop === undefined) {
        return
    }
    if (flag === 'equal') {
        // 獲取該列中第一個不為空的數(shù)據(jù)(內(nèi)容)
        for (let i = 0; i < tableData.length; i++) {
            if (tableData[i][prop].length > 0) {
                // console.log('該列數(shù)據(jù)[0]:', tableData[0][str])
                columnContent = tableData[i][prop];
                break;
            }
        }
    } else {
        // 獲取該列中最長的數(shù)據(jù)(內(nèi)容)
        let index = 0;
        for (let i = 0; i < tableData.length; i++) {
            if (tableData[i][prop] === null) {
                return
            }
            const now_temp = tableData[i][prop] + '';
            const max_temp = tableData[index][prop] + '';
            if (now_temp.length > max_temp.length) {
                index = i;
            }
        }
        columnContent = tableData[index][prop];
    }
    console.log('該列數(shù)據(jù)[i]:', columnContent)

    this.flexLabelWidth(columnContent);
}

/**
 * 根據(jù)表頭 label 設(shè)表格列寬度（分配的單位長度可根據(jù)實際需求進行調(diào)整）
 * @param str
 * @returns {string}
 */
flexLabelWidth(str){
    let flexWidth = 0;
    for (const char of str) {
        if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
            // 如果是英文字符，為字符分配 8 個單位寬度
            flexWidth += 8;
        } else if (char >= '\u4e00' && char <= '\u9fa5') {
            // 如果是中文字符，為字符分配 15個 單位寬度
            flexWidth += 20;
        } else {
            // 其他種類字符，為字符分配 8 個單位寬度
            flexWidth += 9;
        }
    }
    if (flexWidth < 80) {
        // 設(shè)置最小寬度
        flexWidth = 80;
    }
    // if (flexWidth > 250) {
    //   // 設(shè)置最大寬度
    //   flexWidth = 250;
    // }
    return flexWidth + 'px';
}

原文鏈接：https://blog.csdn.net/qq_33235680/article/details/122231338
原文鏈接：https://www.cnblogs.com/love314159/p/14537897.html