el-table 单元格不固定高度怎么自适应行高
时间: 2023-10-27 17:42:50 浏览: 67
如果想要使 `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` 组件上,以确保样式生效。
相关问题
el-table 单元格高度设置成整体行高
要将`el-table`的单元格高度设置为整体行高,你可以使用以下方法:
1. 在`el-table`中添加`row-class-name`属性,并指定一个自定义的行样式类。例如:
```html
<el-table :data="tableData" row-class-name="row-class">
<!-- 表格内容 -->
</el-table>
```
2. 在样式中定义自定义的行样式类,并设置行高。例如:
```css
.row-class {
line-height: 50px; /* 设置行高为50px,根据实际情况调整 */
}
```
这样,`el-table`的每一行都会应用自定义的行样式类,并且单元格的高度将与整体行高保持一致。
el-table行高屏幕自适应
为了让el-table在不同浏览器和屏幕尺寸下有自适应的高度,可以按照以下步骤进行设置:
1. 在el-table中动态绑定一个高度 :height="tableHeight",并在data中声明tableHeight。
2. 声明一个方法来计算el-table高度,方法中可以根据页面下方的高度和窗口高度来计算出el-table的高度。
3. 在mounted钩子函数中调用getTableHeight方法,以便在页面加载时就能计算出el-table的高度。
4. 在window的resize事件中再次调用getTableHeight方法,以便在窗口大小改变时重新计算el-table的高度。
具体实现可以参考以下代码:
<el-table ref="multipleTable" :data="tablist" style="width: 100%" v-if="tableHeight" :height="tableHeight">
</el-table>
data() {
return {
tableHeight: "", //表格高度
}
},
methods: {
//计算table高度(动态设置table高度)
getTableHeight() {
let tableH = 210; //距离页面下方的高度
let tableHeightDetil = window.innerHeight - tableH;
if (tableHeightDetil <= 300) {
this.tableHeight = 300;
} else {
this.tableHeight = window.innerHeight - tableH;
}
},
},
mounted() {
this.getTableHeight();
window.addEventListener('resize', this.getTableHeight);
},