iview表格宽度自适应

iview表格的宽度自适应可以通过修改CSS样式来实现。根据引用\[1\]和引用\[2\]的内容，可以尝试以下方法：

1. 修改iview样式：可以通过添加以下CSS代码来实现表格宽度自适应：

.ivu-table-wrapper {
  width: 100% !important;
}
.ivu-table-header table,
.ivu-table-body table,
.ivu-table-tip table {
  width: 100% !important;
  table-layout: auto;
}

这样设置后，表格的宽度将会自适应父容器的宽度。

2. 调整表头和表体的宽度：根据引用\[3\]的内容，可以通过获取表体每一列的宽度，并将它们赋值给表头的每一列来实现宽度的一致性。具体的代码如下：

// 获取表体每一列的宽度
const tbodyColumns = document.querySelectorAll('.ivu-table-body table tr:first-child td');
const thElements = document.querySelectorAll('.ivu-table-header table th');

// 将表体每一列的宽度赋值给表头的每一列
for (let i = 0; i < tbodyColumns.length; i++) {
  const width = tbodyColumns\[i\].offsetWidth;
  thElements\[i\].style.width = width + 'px';
}

这样，表头的每一列的宽度将会与表体的每一列的宽度保持一致，实现了宽度的自适应。

需要注意的是，如果表格设置了最大高度并出现了滚动条，还需要在赋值操作之前将表体内的table宽度减去滚动条的宽度，以避免出现头尾对不齐的情况。

综上所述，通过修改CSS样式和调整表头和表体的宽度，可以实现iview表格的宽度自适应。
#### 引用[.reference_title]
- *1* *3* [关于iview Element table 自适应列宽问题](https://blog.csdn.net/qq_51486722/article/details/122863008)[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^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [iview中Table根据浏览器宽度自适应](https://blog.csdn.net/pipidan_/article/details/114653536)[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^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]