el-table-column 自适应列宽

1、src/utils下新建columnWidth.js文件

export function flexColumnWidth(str, tableData) {
    // 确保 str 和 tableData 是字符串和数组
    str = str + '';
    if (!tableData || !Array.isArray(tableData) || tableData.length === 0) {
        return '80px';
    }
    if (!str || str.length === 0) {
        return '80px';
    }

    // 获取该列中最长的数据(内容)
    let index = 0;
    for (let i = 0; i < tableData.length; i++) {
        if (tableData[i][str] === null) {
            continue;
        }
        const now_temp = tableData[i][str] + '';
        const max_temp = (tableData[index][str] || '').toString();
        if (now_temp.length > max_temp.length) {
            index = i;
        }
    }

    const columnContent = tableData[index][str];
    if (!columnContent) {
        return '80px';
    } else {
        // 以下分配的单位长度可根据实际需求进行调整
        let flexWidth = 0;
        for (const char of columnContent) {
            if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
                flexWidth += 8;
            } else if (char >= '\u4e00' && char <= '\u9fa5') {
                flexWidth += 12;
            } else {
                flexWidth += 8;
            }
        }
        // 确保最小宽度为 80px
        flexWidth = Math.max(flexWidth, 80);
        // 添加额外的宽度
        flexWidth += 30;
        return flexWidth + 'px';
    }
}

2、main.js中配置方法

import { flexColumnWidth } from '@/utils/columnWidth.js'

Vue.prototype.flexColumnWidth = flexColumnWidth

3、使用方法

<template>
    <div>
        <el-table v-loading="tableLoading" border :data="tableData" :cell-style="cellStyle">
            <el-table-column label="公司" align="center" prop="companies"
                :width="flexColumnWidth('companies', tableData)" />
        </el-table>
    </div>
</template>