vue2 - 详细实现elementUI el-table 将表格布局自适应撑满页面高度（布局优化）
在Vue 2中，要使得Element UI的el-table组件的高度自适应撑满整个页面的高度，可以通过设置其高度为100%并结合父容器的高度设置来实现。以下是一个简单的示例：
- 确保最外层的容器（例如
<body>或.app类）具有100%的高度。 - 设置
el-table的height属性为100%，或者使用样式来指定高度为100%。
<template>
<div class="app">
<el-table :data="tableData" class="full-height-table">
<!-- 列配置 -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
// 数据列表
]
};
}
};
</script>
<style>
.app {
height: 100vh; /* 设置高度为视口高度，这样可以使得父容器的高度自适应 */
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.full-height-table {
height: 100%; /* 让表格高度自适应父容器 */
}
</style>在这个示例中，.app类定义了整个应用的最外层容器，并将其高度设置为视口高度（100vh）。.full-height-table类应用于el-table，使得表格高度为100%，与父容器的高度相同。这样，无论数据长度如何，el-table都将自适应并撑满整个页面的高度。
评论已关闭