naive-ui低版本浏览器兼容问题table->scrollbar不适应父元素的高
问题描述
在低版本浏览器部署项目的时候,naive-ui组件库data-table组件内容区域不能滚动。
定位问题
- 找到table对应的scroll组件。查看其对应的高没有问题。
2. 继续看子元素,没有继承父组件的高度。
解决1、给父元素position:relative。子元素position:absolute。
这种方式比较传统。
解决2、利用flex-grow
可以看到组件库封装scrollbar的时候,给了子组件(当前元素:last-child)一个flex-grow:1。
所以给当前元素一个display: flex; flex-direction: column;
解决,要修改子组件高度继承,所以要更改父组件的direction。