el-table自动计算列宽

在element-ui中，el-table组件会自动根据表格内容自适应列宽，如果内容过长则会省略部分内容并显示省略号。如果你想要手动设置列宽，可以使用`:width`属性来设置列宽，例如：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" :width="100"></el-table-column>
  <el-table-column prop="age" label="年龄" :width="80"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

如果你想要自动计算列宽，可以使用以下方法：

1. 设置`:width`为`auto`，这样列宽就会根据内容自适应。

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" :width="auto"></el-table-column>
  <el-table-column prop="age" label="年龄" :width="auto"></el-table-column>
  <el-table-column prop="address" label="地址" :width="auto"></el-table-column>
</el-table>

2. 使用CSS样式来计算列宽，例如：

<el-table :data="tableData" class="my-table">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

.my-table .el-table__body-wrapper {
  display: flex;
  flex-direction: column;
}

.my-table .el-table__body-wrapper .el-table__row {
  display: flex;
}

.my-table .el-table__body-wrapper .el-table__cell {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这段CSS代码会将表格行和单元格都设置为`flex`布局，并且使用`flex: 1`来平均分配每个单元格的宽度。同时，`white-space: nowrap`可以防止单元格换行，`overflow: hidden`可以隐藏超出部分，`text-overflow: ellipsis`可以在超出部分处显示省略号。

通过这两种方法，你就可以自动计算列宽并显示省略号了。