为了实现el-table的高度自适应,您可以通过计算其父容器的高度,并减去可能存在的内边距(padding)、边框(border)等,来动态设置el-table的高度。此外,可以使用Vue的响应式系统,结合window.resize事件监听器,来确保当浏览器窗口大小变化时,el-table的高度也能相应调整。 这里是一个基于Vue的示例代码片段: vue <templ...
然后我们使用Element.getBoundingClientRect()这个接口来获取自适应区域的高度,设置为表格高度,这样即可达到自适应高度固定表头的效果。 export default {data () {return {tableHeight: 0,tableData: [// xxx 表格数据]}},mounted () {this.calHeight(...
我们把表格插入到自适应区域,并将设置自适应区域为相对定位,表格容器设置为绝对定位: <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...
实现自适应高度固定表头的关键步骤包括：1. 使用CSS设置容器为弹性布局，并让表格容器绝对定位。2. 使用JavaScript计算容器高度，并将其设置为el-table的height属性。3. 监听窗口resize事件，定期或在特定操作后重新计算高度。此外，还需考虑其他可能影响容器高度的因素，如DOM元素变动和样式修改。为确保解决...
element-ui的表格组件el-table固定表头,需要设置height,官方文档就是这样规定的(如下图),那么height写什么数值呢? 如果height写一个固定的数值,那这样会出现一个风险,就是在不同的屏幕尺寸设备,表现的效果也是不一样的,会出现非常难看的情况,这样肯定是不理想的。网上的解决方案五花八门,而且还不一定能实现。面对...
本文使用的方案是,使用CSS和JS结合的方式,首先使用CSS规划出一个自适应高度的容器container,组件放到container的内部使用absolute绝对定位脱离文档流(如此table的高度不会影响到页面布局),然后使用JS获取container的高度tableHeight,将该值设置为el-table的height属性,从而实现表格自适应高度固定表头。
本文使用的方案是,使用CSS和JS结合的方式,首先使用CSS规划出一个自适应高度的容器container,组件放到container的内部使用absolute绝对定位脱离文档流(如此table的高度不会影响到页面布局),然后使用JS获取container的高度tableHeight,将该值设置为el-table的height属性,从而实现表格自适应高度固定表头。