elementplus 表格宽度自适应

elementplus 表格宽度自适应可以通过以下两种方案实现。

方案一：使用el-table-column的flexColumnWidth方法来计算列宽。该方法会遍历每一列的内容，获取最宽一列的宽度，并加上表格的内间距，最后返回一个自适应的宽度值。可以在el-table-column标签中使用该方法来设置列宽。例如：

<el-table :data="tableData">
  <el-table-column prop="name" label="名称" :width="flexColumnWidth('名称', 'name')" />
</el-table>

方案二：设置el-table的table-layout属性为'auto'，并添加一个tableAuto类名。这样可以让表格宽度自适应内容。例如：

<el-table :data="tableData" table-layout="auto" class="tableAuto">
  <el-table-column prop="name" label="名称" />
</el-table>

需要注意的是，方案一需要在methods中定义flexColumnWidth方法，并在计算列宽时考虑表格的内间距。而方案二则直接通过设置table-layout属性和添加类名来实现表格宽度的自适应。选择哪种方案取决于具体的需求和实际情况。
#### 引用[.reference_title]
- *1* [vue+elementPlus el-table组件列自适应宽度](https://blog.csdn.net/StevenYanghahha/article/details/130581203)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [elementUI 表格宽度自适应、不换行](https://blog.csdn.net/luoyumeiluoyumei/article/details/125853152)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]