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

/**
 * 获取表格中的规定的字符串
 * @param prop
 * @param tableData
 * @param flag
 * @returns {string}
 */
getTableString(prop, tableData, flag = 'max') {
    // prop 为该列的字段名(传字符串)，tableData 为该表格的数据源(传变量)
    // flag 为可选值，可不传该参数，传参时可选 'max' 或 'equal'，默认为 'max'
    // flag 为 'max' 则设置列宽适配该列中最长的内容，flag 为 'equal' 则设置列宽适配该列中第一行内容的长度
    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') {
        // 获取该列中第一个不为空的数据(内容)
        for (let i = 0; i < tableData.length; i++) {
            if (tableData[i][prop].length > 0) {
                // console.log('该列数据[0]:', tableData[0][str])
                columnContent = tableData[i][prop];
                break;
            }
        }
    } else {
        // 获取该列中最长的数据(内容)
        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('该列数据[i]:', columnContent)

    this.flexLabelWidth(columnContent);
}

/**
 * 根据表头 label 设表格列宽度（分配的单位长度可根据实际需求进行调整）
 * @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) {
        // 设置最小宽度
        flexWidth = 80;
    }
    // if (flexWidth > 250) {
    //   // 设置最大宽度
    //   flexWidth = 250;
    // }
    return flexWidth + 'px';
}

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