Element Table 表格高度自适应

之前是这样写的。。。

getHeight() {
        this.$nextTick(() => {
          this.$refs.multipleTable.$el.getBoundingClientRect().top; //表格距离浏览器的高度
          this.heights = window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 20;//20是表格底部需要空出的高度,可自行更改
          // 监听浏览器高度变化,修改表格高度
          window.onresize = () => {
            this.heights = window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 20;
          }
        })
},

但是由于每个页面都要用到,所以封装了一下。

  1. utils.js

export function tableHeight() {
 let heights = 0;
    let heightlen = 0;
    let classnameExists = !!document.getElementsByClassName("el-pagination");
    // console.log('classnameExists',classnameExists);
    heightlen = classnameExists ? 55 : 0;

    this.heights = window.innerHeight - this.$refs.multipleTable.$el.offsetTop - heightlen;
    // console.log(this.heights);
    window.onresize = () => {
        this.heights =
            window.innerHeight - this.$refs.multipleTable.$el.offsetTop - heightlen;
    };
}
  1. 页面引用

 

                    
                    

你可能感兴趣的:(样式自适应,elementui,前端)