el-table行高屏幕自适应
时间: 2023-11-23 19:53:27 浏览: 100
为了让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);
},
阅读全文