设置vue中的el-table表头自适应宽度
时间: 2023-10-07 13:05:23 浏览: 190
vue el-table实现自定义表头
要设置Vue中的`el-table`表头自适应宽度,可以使用`fit`属性和`width`属性。
使用`fit`属性可以让表格自动调整宽度以适应容器,如下所示:
```html
<el-table :data="tableData" :fit="true">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```
使用`width`属性可以设置表头的宽度,如下所示:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" width="100"></el-table-column>
<el-table-column prop="age" label="年龄" width="100"></el-table-column>
<el-table-column prop="address" label="地址" width="200"></el-table-column>
</el-table>
```
同时使用`fit`属性和`width`属性可以让表格自适应容器并设置表头的宽度,如下所示:
```html
<el-table :data="tableData" :fit="true">
<el-table-column prop="name" label="姓名" width="100"></el-table-column>
<el-table-column prop="age" label="年龄" width="100"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```
这样设置后,表格会自适应容器的宽度,并且姓名和年龄列的宽度固定为100px,地址列的宽度自适应。
阅读全文