el-table宽度自适应
时间: 2023-10-05 22:14:59 浏览: 216
【JavaScript源代码】el-table表头根据内容自适应完美解决表头错位和固定列错位.docx
如果想让`el-table`的宽度自适应父元素大小,可以设置`width`属性为`100%`。同时,如果表格中的列宽度没有设置,可以设置`fit`属性为`true`,这样表格会自动调整列宽度以适应表格宽度。
例如:
```html
<template>
<div class="table-container">
<el-table :data="tableData" :width="100%" :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>
</div>
</template>
<style>
.table-container {
width: 80%; /* 设置父元素宽度 */
margin: 0 auto;
}
</style>
```
这样,`el-table`就会自适应父元素的宽度,并且列宽度也会自动调整。
阅读全文