我们把表格插入到自适应区域,并将设置自适应区域为相对定位,表格容器设置为绝对定位: <div class="table-container flex-a" ref="container"> <div class="table-container-inner"> <el-table :data="tableData" :height="tableHeight" border> </el-table> </div> </div> 1. 2. 3. 4. 5. 6. 7...
下面是一个简单的例子,红色框是父容器,蓝色框是自适应高度的内容区域,该元素没有设置height属性,其高度自动适应为父元素高度减去“头部”的高度、padding、头部和“内容”之间的margin等。 <div class="container"> <div class="header">不确定高度的头部</div> <div class...
实现自适应高度固定表头的关键步骤包括：1. 使用CSS设置容器为弹性布局，并让表格容器绝对定位。2. 使用JavaScript计算容器高度，并将其设置为el-table的height属性。3. 监听窗口resize事件，定期或在特定操作后重新计算高度。此外，还需考虑其他可能影响容器高度的因素，如DOM元素变动和样式修改。为确保解决...
本文使用的方案是,使用CSS和JS结合的方式,首先使用CSS规划出一个自适应高度的容器container,组件放到container的内部使用absolute绝对定位脱离文档流(如此table的高度不会影响到页面布局),然后使用JS获取container的高度tableHeight,将该值设置为el-table的height属性,从而实现表格自适应高度固定表头。 二、使用CSS规划自适应...
本文使用的方案是,使用CSS和JS结合的方式,首先使用CSS规划出一个自适应高度的容器container,组件放到container的内部使用absolute绝对定位脱离文档流(如此table的高度不会影响到页面布局),然后使用JS获取container的高度tableHeight,将该值设置为el-table的height属...