el-table 设置cell单元格高度跟行一样高
时间: 2023-10-02 14:05:22 浏览: 144
要设置 `el-table` 的单元格高度与行高一样,可以使用 `cell-class-name` 属性来指定一个自定义的单元格样式类。然后在这个样式类中设置单元格的高度为行高。具体步骤如下:
1. 在 `el-table` 组件中设置 `cell-class-name` 属性,值为自定义的样式类名,比如 `table-cell`。
```html
<el-table :data="tableData" cell-class-name="table-cell">
<!-- 表格列定义 -->
</el-table>
```
2. 在你的样式文件中,定义 `table-cell` 样式类,并设置高度为行高。假设你使用的是默认的行高为 40px。
```css
.table-cell {
height: 40px;
}
```
这样,`el-table` 的单元格高度就会与行高一样了。
注意:如果你在 `el-table-column` 中定义了自定义的插槽内容,需要在插槽内容的外层包裹一个 `<div>` 元素,并为该元素设置 `class` 属性为 `table-cell`,以确保插槽内容也应用了相同的高度样式。
```html
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<div class="table-cell">
<!-- 自定义插槽内容 -->
</div>
</template>
</el-table-column>
```
阅读全文