el-table-column 表格根据内容自适应宽度
时间: 2023-10-28 20:50:13 浏览: 170
你可以将表格的宽度设置为100%,然后再设置 el-table-column 的 min-width 和 max-width 属性,让表格的列宽根据内容自适应。你也可以使用 column-width 属性设置列宽,同时通过 white-space 属性控制单元格内容的换行和溢出效果。如果你使用了固定列宽,可以通过设置 el-table-column 的 resizable 属性为 true,让用户可以通过拖拽表格列边缘来调整列宽。
相关问题
el-table-column宽度自适应
el-table-column可以根据表格内容自适应宽度。可以设置属性width="auto"或者不设置width属性,这样el-table-column会根据表格内容自动调整宽度。如果需要固定宽度,可以设置具体的宽度值。
el-table-column自适应宽度
对于el-table-column自适应宽度的问题,可以使用以下两种方法:
1. 设置width属性为auto,让列宽度自适应内容:
<el-table-column prop="name" label="姓名" width="auto"></el-table-column>
2. 使用slot-scope自定义列模板,通过监听内容宽度动态设置列宽度:
<el-table-column label="姓名">
<template slot-scope="scope">
<div class="cell">{{ scope.row.name }}</div>
</template>
</el-table-column>
<style>
.cell {
width: fit-content;
min-width: 100%;
}
</style>
其中,.cell样式中的width: fit-content可以使宽度自适应内容,min-width: 100%可以保证单元格宽度不小于列宽度。
阅读全文