vue3 element-plus表格自适应宽高

在Vue3中使用Element Plus库创建表格时，如果你想要实现列宽和行高的自适应，可以利用Element Plus提供的`el-table`组件的一些特性。Element Plus的`el-table`支持高度自动调整(`height-fit')和列宽度自适应(`flex')。

1. **列宽度自适应**:
使用`flex`属性可以让列根据内容动态调整宽度，例如：

   <el-table :data="tableData" style="width: 100%">
     <el-table-column prop="name" label="姓名" width="auto"></el-table-column>
     <!-- 更多列... -->
   </el-table>

这里`width="auto"`表示列宽会根据内容自动调整。

2. **高度自适应**:
如果你想让整个表格的高度随着数据变化而动态调整，可以在表格外部设置固定高度，并加上`height-fit`属性：

   <div class="table-container" style="height: 500px; overflow-y: auto;">
     <el-table :data="tableData" height-fit></el-table>
   </div>

当数据过多导致滚动条出现时，表格会填充整个容器高度。

请注意，`height-fit`可能会有一些性能开销，特别是在大数据量下，因为它需要计算每个可见行的高度。你可以根据实际需求调整高度。