VUE element表格自调宽度

Vue Element UI 表格的列宽默认是固定的，如果你想要实现列宽根据内容动态调整（即自适应），你可以使用 `el-table-column` 的 `min-width` 和 `show-overflow-tooltip` 属性，以及设置单元格内内容的 `white-space`。

1. 首先，设置 `min-width` 来保证列有一个最小宽度，防止过于压缩导致无法显示内容。例如：

<template>
  <el-table :data="tableData">
    <el-table-column
      prop="name"
      label="名称"
      min-width="80"
      show-overflow-tooltip
      :formatter="formatName"
    />
  </el-table>
</template>

<script>
export default {
  methods: {
    formatName(value) {
      return `${value} <span style="width: calc(100% - 4em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></span>`;
    }
  }
}
</script>

在这个例子中，`formatter` 函数用于格式化单元格的内容，并通过 CSS 控制超出部分显示省略号和 tooltip。

2. `show-overflow-tooltip` 属性会让当单元格内容溢出时显示提示信息，帮助用户理解隐藏的内容。