el-table 内的 cell类盒子高度怎么设置成行高
时间: 2024-04-08 22:30:00 浏览: 49
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
5星 · 资源好评率100%
要将`el-table`内的单元格高度设置为行高,你可以使用以下方法:
1. 在`el-table`的列定义中,使用`slot-scope`来获取单元格的数据和索引。例如:
```html
<el-table :data="tableData">
<el-table-column prop="name">
<template slot-scope="scope">
<div class="cell-wrapper">{{ scope.row.name }}</div>
</template>
</el-table-column>
</el-table>
```
2. 在样式中定义`.cell-wrapper`类,并设置其高度为行高。例如:
```css
.cell-wrapper {
height: 50px; /* 设置行高为50px,根据实际情况调整 */
display: flex;
align-items: center;
}
```
这样,`el-table`内的单元格将应用`.cell-wrapper`类,并且单元格的盒子高度将与行高保持一致。
阅读全文