文章探讨了在Vue项目中使用el-tabs组件和el-table组件时遇到的高度适配问题。当el-table的高度依赖父组件时，只有第一个tabs能正确显示。提出的解决方案包括使用Vuex存储第一个tabs的高度，或者在子组件间传递高度信息。另外，还可以监听主页面高度并动态计算table高度。
el-tabs包含el-table的高度适配问题
el-table不能自适应高度，必须给定具体的值，才能显示正常，同时在数据条数超过其高度时，table出现滚动条，而不是整个页面出现滚动条。
当多个tabs时，如果table高度，依赖性其父组件的高度，只有第一个tabs高度为实际值，其他tabs的高度为0，但mounted时，已经赋值给table,会导致其他tabs的table显示不出来。
目前采取了两种解决方案
1 把第一个tabs的高度计算出来后，保存到vuex中，当显示第二tabs时，从vuex中读取
2 在tabs的子组件设置一个属性，外层的高度获取到后，通过属性传给子组件，子组件显示时，直接计算一下（减去其他部分的高度，一般就是底部查询或操作高度，底部分页高度）
还有一个终极方案，就是对主页面的高度保持到vuex中，同时其他组件，都监听这个值，然后计算出table的高度。
参考vue+vuex实现自适应elementUI中table高度_erd.listento_suoh's Blog的博客-CSDN博客
扫一扫
2036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
