一、概述

在表格宽度固定时，实现内容不换行，表格自动显示滚动条

当前显示效果：

 期望实现效果：

 二、实现思路

遍历表格数组，每次都构建一个隐藏的span元素，获取该元素的宽度，对比保存最大值

代码如下：

/**
 * 表格列宽自适应
 * @param prop 属性
 * @param records 数据
 * @param minWidth 最小宽度
 */
const getColumnWidth = (prop: string, records: any, minWidth = 80) => {
    const padding = 12; // 列内边距

    const contentWidths = records.map((item: any) => {
        const value = item[prop] ? String(item[prop]) : "";
        const textWidth = getTextWidth(value);
        return textWidth + padding;
    });

    const maxWidth = Math.max(...contentWidths);
    return Math.max(minWidth, maxWidth);
}
/**
 * el-table扩展工具  -- 列宽度自适应 - 获取列宽内文本宽度
 * @param {*} text 文本内容
 * @returns 文本宽度(int)
 */
const getTextWidth = (text: any) => {
    const span = document.createElement("span");
    span.style.visibility = "hidden";
    span.style.position = "absolute";
    span.style.top = "-9999px";
    span.style.whiteSpace = "nowrap";
    span.style.fontSize = "16px";
    span.innerText = text;
    document.body.appendChild(span);
    const width = span.offsetWidth + 16;
    document.body.removeChild(span);
    return width;
}

使用：

<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" :width="getColumnWidth('address', tableData)"/>
</el-table>

三、总结

其实是比较dirty的实现方式，性能不算很好，但胜在简单好用。另外还可以全局注入该方法。

网上也有比较专业的组件库解决这一问题：

https://github.com/legendJaden/AFTableColumn

基于 element-ui 组件库的 el-table-column 组件, 支持自适应列宽功能