ElementUI 表格自适应高度终极解决方案

最新推荐文章于 2024-05-10 10:03:10 发布

小鱼在编程

最新推荐文章于 2024-05-10 10:03:10 发布

阅读量1.5k

点赞数 1

分类专栏：前端 vue 文章标签： elementui javascript vue.js

来自小鱼吃猫的创作，关于微信公众号小鱼与Java获取更多学习资料

本文链接：https://blog.csdn.net/weixin_43605736/article/details/123453647

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

ElementUI 表格自适应高度终极解决方案

直接上代码，这样不管在表格上边有任何组件，都可以解决。下边的这个50高度是用来放其他组件的，比如常见的分页组件，如果你不需要的话，可以不用放。

    this.$nextTick(function () {
    //在页面渲染完成后
      this.height = window.innerHeight - this.$refs.table.$el.getBoundingClientRect().top - 50     
      this.$refs.table.$el.getBoundingClientRect().top //表格距离浏览器的高度
      var that = this
      // 添加监听窗口大小变化事件
      window.onresize = function () {
        that.height = window.innerHeight - that.$refs.table.$el.getBoundingClientRect().top - 50
      }
    })