el-table实现列宽自适应

el-table默认情况下，列宽是固定的。如果要实现列宽自适应，可以使用以下方法：

1. 设置列宽为自适应

在el-table-column中设置width属性为"auto"，即可实现列宽自适应。

<el-table-column prop="name" label="名称" width="auto"></el-table-column>

2. 使用弹性布局

设置el-table-column的flex属性为1，即可实现列宽自适应，同时也可以使用min-width、max-width等属性控制列宽的范围。

<el-table-column prop="name" label="名称" :flex="1"></el-table-column>

3. 使用计算属性动态计算列宽

通过计算每列中内容的长度，动态计算列宽。

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="名称" :width="nameWidth"></el-table-column>
    <el-table-column prop="age" label="年龄" :width="ageWidth"></el-table-column>
    <el-table-column prop="address" label="地址" :width="addressWidth"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "张三", age: 18, address: "北京市" },
        { name: "李四", age: 20, address: "上海市" },
        { name: "王五", age: 22, address: "广州市" },
      ],
    };
  },
  computed: {
    nameWidth() {
      let maxLength = 0;
      this.tableData.forEach((item) => {
        maxLength = Math.max(maxLength, item.name.length);
      });
      return maxLength * 12;
    },
    ageWidth() {
      let maxLength = 0;
      this.tableData.forEach((item) => {
        maxLength = Math.max(maxLength, item.age.toString().length);
      });
      return maxLength * 12;
    },
    addressWidth() {
      let maxLength = 0;
      this.tableData.forEach((item) => {
        maxLength = Math.max(maxLength, item.address.length);
      });
      return maxLength * 12;
    },
  },
};
</script>

以上是三种实现el-table列宽自适应的方法，根据实际需求选择合适的方法即可。