css⾼度⾃适应屏幕_关于element-ui⾃适应⾼度的问题以及解
决思路
起因
还是接⼿了之前同事的代码，之前他的代码遗留了⼀个历史问题，⼀个element-ui的表格⾼度只有500 当然，在开发⽤的mac电脑上看还是很正常的，但是在实际的业务场景中，会有⼀些使⽤⼈使⽤的是⼀些⼤号的屏幕，实际效果上表格只占了页⾯的⼀⼩部分，⼜因为表格的内容很多，所以空了⼀⼤块页⾯，但是浏览数据却需要不停的滚轮
改进过程
分析要做什么
⾸先分析了⼀波造成这样现象的原因，发现是element-ui table的⾼度被钉死了，但是⼜由于是历史项⽬，页⾯被包裹在⼀个iframe⾥，同时element-ui不⽀持使⽤auto属性
综上所述，为了⼀个顺溜的滚动条体验，只能让table⾃动填满剩余⾼度了，盘算了⼀下需要做
监听页⾯⼤⼩变化
防抖，省的卡顿
获取剩余⾼度
设定⼀个最⼩⾼度
做好各类检测，防⽌报错
开写
监听问题
window.addEventListener(‘resize’, handler)
记得也要在对应时间销毁
防抖
这⾥直接上debounce
⾼度
1. ⾸先获取页⾯⾼度window.innerHeight
2. 然后获取table距离顶部的⾼度el.getBoundingClientRect().top
3. 这⾥有个⼩问题，就是定义的⾼度是body的⾼度，但是剩余区域是包括head的所以我们获取对应的⾼度el.querySelector(‘.el-
table__header-wrapper’).offsetHeightelement表格横向滚动条
4. 空余⾼度计算Math.max(innerHeight - offsetTop - tableHeaderHeight - OFFSET_BUTTON, MIN_TABLE_MAX_HEIGHT)
这个是考虑了⼀个最⼩⾼度和空余页⾯底部距离的算式
整合
const TABLE_OFFSET_BOTTOM = 10
const MIN_TABLE_MAX_HEIGHT = 500
window.addEventListener(‘resize’, _.debounce(function() {
const innerHeight = window.innerHeight
const table = ElementById(‘table’)
if (!table) {
return
}
const offsetTop = BoundingClientRect().top
const tableHeaderHeight = table.querySelector(‘.el-table__header-wrapper’).offsetHeight
const maxTableHeight = Math.max(innerHeight - offsetTop - tableHeaderHeight - TABLE_OFFSET_BOTTOM, MIN_TABLE_MAX_HEIGHT)  // 改变element的参数即可
},300))
结果
很完美，哎嘿

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。