el-table 单元格不固定高度怎么自适应行高
时间: 2023-10-27 19:42:50 浏览: 153
element中table高度自适应的实现
如果想要使 `el-table` 的单元格高度自适应并与行高一样,可以在自定义的行样式类中设置 `display: flex` 和 `align-items: center`,以确保单元格垂直居中。具体步骤如下:
1. 在 `el-table` 组件中设置 `row-class-name` 属性,值为自定义的样式类名,比如 `table-row`。
```html
<el-table :data="tableData" row-class-name="table-row">
<!-- 表格列定义 -->
</el-table>
```
2. 在你的样式文件中,定义 `table-row` 样式类,并设置行的高度为行高,并将其内部的单元格垂直居中。
```css
.table-row {
height: 40px; /* 假设行高为 40px */
display: flex;
align-items: center;
}
```
这样,`el-table` 的单元格高度就会自适应并与行高一样,并且内容也会垂直居中显示。
请注意,需要确保 `row-class-name` 属性应用在 `el-table` 组件上,以确保样式生效。
阅读全文