el-table 自动调节列宽
时间: 2024-01-12 16:22:17 浏览: 45
el-table组件是Element UI中的一个表格组件,它提供了自动调节列宽的功能。你可以通过设置`fit`属性为`true`来实现自动调节列宽的效果。具体的步骤如下:
1. 首先,安装`af-table-column`插件,可以使用以下命令进行安装:
```shell
npm install af-table-column
```
2. 在`main.js`文件中引入`af-table-column`插件,并使用`Vue.use()`方法进行挂载:
```javascript
import AFTableColumn from 'af-table-column'
Vue.use(AFTableColumn);
```
3. 在需要自适应列宽的表格页面中,将`el-table-column`组件改为`af-table-column`组件,并设置`fit`属性为`true`:
```html
<el-table ref="table" :data="tableData" tooltip-effect="dark" :header-cell-style="{ background: '#ddd' }" border style="width: 100%">
<af-table-column label="企业名称" prop="enterpriseName" align="center" show-overflow-tooltip fit></af-table-column>
</el-table>
```
通过以上步骤,el-table组件会自动调节列宽,使得表格中的内容能够完整显示,并且可以拉动每列的宽度。此外,你还可以将每列的宽度保存到localStorage中,以便在刷新页面后能够保持之前设置的列宽。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)