ElementUI中实现el-table表格列宽自适应,列根据内容自动撑满,内容不换行

一、概述

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

当前显示效果：

 期望实现效果：

 二、实现思路

遍历表格数组，每次都构建一个隐藏的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: string) => {
    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>

三、全局注入

以vue3 + ts 为例

在utils文件夹下新建 el_table.ts ，内容如下：

/**
 * 表格列宽自适应
 * @param prop 属性
 * @param records 数据
 * @param minWidth 最小宽度
 * @param padding 列内边距
 * @param fontSize 字体大小
 */
export const getColumnWidth = (prop: string, records: any, minWidth = 80, padding = 12, fontSize = 16) => {
  const contentWidths = records.map((item: any) => {
    const value = item[prop] ? String(item[prop]) : '';
    const textWidth = getTextWidth(value, fontSize);
    return textWidth + padding;
  });

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

在src文件夹下修改 main.ts ，内容如下：

import { getColumnWidth } from '@/utils/el_table';
app.config.globalProperties.getColumnWidth = getColumnWidth;

在types文件夹下修改 module.d.ts，内容如下：

import { getColumnWidth } from '@/utils/el_table';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    getColumnWidth: typeof getColumnWidth;
  }
}

在types文件夹下修改 global.d.ts, 内容如下：

import type { ComponentInternalInstance as ComponentInstance, PropType as VuePropType } from 'vue';

declare global {
  /** vue Instance */
  declare type ComponentInternalInstance = ComponentInstance;
  /**vue */
  declare type PropType<T> = VuePropType<T>;
}

三、总结

其实是比较dirty的实现方式，性能不算很好，但胜在简单好用。

getColumnWidth函数中的minWidth是为了表头不换行而存在的，此处也可以根据表头文字生成最小值

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

af-table-column

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

 

参考：https://blog.csdn.net/qickcao/article/details/135903584