本文介绍如何使用Element-UI的Table组件实现响应式布局，通过设置容器为flex布局及Table高度为100%，使Table组件能根据容器大小自动调整，保持良好的视觉效果和用户体验。
场景描述：
在一个宽高自适应的容器内引入Table组件，容器的宽度和高度不定，需要Table的宽和高随容器大小变化而变化，容器过小时，表格出现滚动条；
解决思路：
element-ui的Table组件默认宽度100%，主要解决高度问题，在组件的api说明里，有一个height属性，描述如下：
这一属性的主要作用为设置Table的高度，超出此高度Table会显示滚动条，结合我们的需求，只要将这一属性的值设为容器的高度即可，考虑到容器高度不固定，我们需要用外部样式来控制Table这一属性
我的解决方案：
1.为容器设置display:flex
2.Table的height属性值为'100%'，
ps:主要为容器设置display:flex，height的值设为其他也可以，但我为了表达规范设置为了'100%'
扫一扫
1645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
