element-ui data table 高度height自适应填满屏幕主要内容区域

原创 创建时间:2019-11-27 访问量:743 赞:0 踩:0

1、起初我是给table的:height设一个变量tableHeight,然后在页面加载完成后动态的计算这个tableHeight值。data table我是放在市局el-main中的,el-main已经充满屏幕了。方法如下:

    // 设置表格高度
    setTableHeight: function() {
      let tableHeight = this.$refs["container"].clientHeight;
      this.tableHeight = tableHeight - 280;
    },

280这个值固定的,因为el-main是自适应,el-header和el-footer都有固定像素,把这些固定像素减掉就能算出表格的高度了。

2、更简单,更合理的方案

将表格table所在的el-main的样式设置为:

display: flex;

flex-direction: column;

然后将table的height属性设置为字符串'100%',注意height前没有:号。

这样就大功告成了!

评论
 我想说:
==已经到底了==
关注: 粉丝: 积分:
工联信息网
如有问题请致邮箱:need@glxxw2018.com(仅限本站无法查询到的资料);本站能够查询到的资料请关注“工联信息网”公众号,通过页面提供的资源码查询!
不良信息反馈及侵权投诉建议请致邮箱:accusation@glxxw2018.com