解决element的Table表格组件的高度自适应问题
目的
在项目开发过程中,界面内容需要根据显示屏幕或缩放比例进行自适应,使用el-table的时候发现height属性使用 calc(100% - 250px)
不起作用,无法进行滚动操作,250是layout页面,其他组件布局高度。
原因
经过调试发现 el-table height 属性 只能使用 数字 或者 字符串 设定值能实现滚动效果。暂时先记录一种处理办法。
解决办法
1. 使用计算属性 窗口大小变化时,动态计算高度
<template>
<div class="wanan-page-container">
<el-card ref="cardRef" class="wanan-h-full" body-class="wanan-h-full">
<el-table
ref="tableRef"
:data="tableData"
show-overflow-tooltip
:height="table.tableAotoHeight"
highlight-current-row
border
>
<el-table-column width="40" align="center"></el-table-column>
<el-table-column prop="Id" label="编码" align="left" />
<el-table-column prop="Name" label="名称" align="center" />
<el-table-column prop="Ename" label="代码" align="center" />
</el-table>
</el-card>
</div>
</template>
<script setup lang="ts">
const cardRef = ref();
const table = reactive({
tableAotoHeight: 550
});
window.onresize = () => {
nextTick(() => {
table.tableAotoHeight = cardRef.value?.$el.clientHeight - 250;
});
};
onMounted(() => {
table.tableAotoHeight = cardRef.value?.$el.clientHeight - 250;
});
</script>
// 页面最底层容器,95px为菜单栏的高度
.wanan-page-container {
height: calc(100vh - 95px);
padding: 10px; // 统一样式,上下左右都给10px的内边距
}
// 继承父级高度
.wanan-h-full {
height: 100%;
}