基于 Element UI 表格的自适应列宽方法

在 Vue.js 项目中，结合 Element UI 的

<el-table>

组件进行表格开发是非常常见的需求。而 Element UI 的表格默认情况下会自动分配列宽，有时候可能会导致列宽不合适，影响展示效果。本文将介绍一种通过自定义方法，基于表格内容动态调整列宽的解决方案。

1. 问题背景

在使用 Element UI 表格时，表格列宽通常可以通过

width

或

min-width

属性进行设置，但这些都是静态的。如果表格的内容过长或过短，列宽有可能不合适，导致内容显示不完全或列宽过大。我们希望能够根据每列的实际内容，动态调整每列的最小宽度，从而达到更好的显示效果。

2. 解决方案思路

1. 文本宽度计算：通过创建一个隐藏的 span 元素，插入需要计算宽度的文本内容，利用 offsetWidth 获取文本的实际宽度。
2. 遍历表格列和内容：通过遍历表头和表格每列的数据，找出最长的文本，作为该列的最小宽度参考。
3. **结合 Element UI 的 el-table-column**：将计算出来的宽度应用到每一列的 min-width 属性，确保列根据内容自适应宽度。

3. 实现代码

HTML部分：

<template>
  <el-table height="100%" :data="tableData">
    <el-table-column
      v-for="(item, index) in columns"
      :key="index"
      :label="item.label"
      :prop="item.prop"
      align="center"
      :min-width="flexColumnWidth(item.label, item.prop, tableData)"
    />
  </el-table>
</template>

JavaScript部分：

<script>
export default {
  data() {
    return {
      columns: [
        { label: "测试小类", prop: "policyCategory" },
        { label: "重量段", prop: "weightRange" },
        { label: "基数", prop: "baseNumber" },
      ],
      tableData: [
        {
          policyCategory: "测试1",
          weightRange: "0.000KG（不含）-0.500KG（含）",
          baseNumber: "6700",
        },
        {
          policyCategory: "测试2",
          weightRange: "0.500KG（不含）-1.000KG（含）",
          baseNumber: "6700",
        },
      ],
    };
  },
  methods: {
    // 计算文本宽度
    getTextWidth(str) {
      let width = 0;
      const html = document.createElement("span");
      html.innerText = str;
      html.className = "getTextWidth";
      document.querySelector("body").appendChild(html);
      width = document.querySelector(".getTextWidth").offsetWidth * 1.2;
      document.querySelector(".getTextWidth").remove();
      return width;
    },
    // 动态计算列宽
    flexColumnWidth(label, prop, data) {
      // 将表头加入数组
      const arr = data.map((x) => x[prop]);
      arr.push(label);
      // 计算每列内容最大的宽度
      const maxWidth = arr.reduce((acc, item) => {
        if (item) {
          const width = this.getTextWidth(item);
          acc = Math.max(acc, width);
        }
        return acc;
      }, 0);
      // 返回最大宽度加上额外的内间距
      return maxWidth + 25 + "px";
    },
  },
};
</script>

CSS部分：

<style scoped>
/* 可选的样式控制，调整显示效果 */
.getTextWidth {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  font-size: 14px; /* 根据实际需求调整字体大小 */
}
</style>

4. 代码解释

1. **动态计算文本宽度 (getTextWidth)**：- 创建了一个隐藏的 span 元素，将需要测量的文本插入到 span 中，然后通过 offsetWidth 获取宽度。这个方法可以精确地计算出文本所需的宽度。
2. **自适应列宽方法 (flexColumnWidth)**：- 首先，将表头和每列的数据内容整合到一个数组中。- 通过 reduce 遍历数组，找出最长的文本宽度，最后返回该宽度加上一些内间距（例如 25px），用于设置 el-table-column 的 min-width。
3. 结合 Element UI 表格的实现：- 在 <el-table-column> 中使用 v-for 遍历列配置，利用 :min-width="flexColumnWidth(item.label, item.prop, tableData)" 动态地根据内容设置每列的最小宽度。

5. 结论

通过上述方法，我们可以轻松实现 Element UI 表格列宽的自适应调整，使得表格的显示效果更加美观。无论是表头还是内容，只要有长度变化，表格列都会根据内容的长度动态调整宽度，确保用户体验的友好性。

你可以将此代码应用到实际项目中，配合 Element UI 表格来提升表格的显示效果。这种方法不仅灵活，而且适合不同数据量的表格场景。

希望本文能对你有所帮助！