el-table设置列宽
时间: 2023-11-08 13:59:58 浏览: 151
可调整列宽TABLE
4星 · 用户满意度95%
el-table 是 Element UI 提供的一个表格组件,可以通过设置列的 width 属性来自定义列宽。你可以在 el-table-column 组件中设置 width 属性来控制列的宽度。
这里有几种设置列宽的方式:
1. 固定宽度:可以直接在 el-table-column 组件上设置 width 属性,如下所示:
```html
<el-table-column prop="name" label="姓名" width="100"></el-table-column>
```
这样设置后,该列的宽度将固定为 100px。
2. 自适应宽度:可以使用特殊值 "auto" 来让列自适应内容的宽度,如下所示:
```html
<el-table-column prop="name" label="姓名" width="auto"></el-table-column>
```
这样设置后,该列的宽度将根据内容自动调整。
3. 百分比宽度:可以使用百分比值来设置列宽度,如下所示:
```html
<el-table-column prop="name" label="姓名" width="20%"></el-table-column>
```
这样设置后,该列的宽度将占据表格的 20%。
4. 最小宽度:可以使用 min-width 属性来设置列的最小宽度,如下所示:
```html
<el-table-column prop="name" label="姓名" :min-width="100"></el-table-column>
```
这样设置后,该列的宽度将至少为 100px。
阅读全文