vue element table 动态设定table高度兼容页面大小无滚动条

晟晟今天吃可爱多了没有

于 2023-03-23 10:14:47 发布

阅读量561

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43638614/article/details/129717106

版权

实现思路：如图，获取h总、h1、h2，则table高度就为h总-(h1+h2)。
在这里插入图片描述
1.定义一个属性存放计算后的table高度

tableHeight:10,

在这里插入图片描述

2.给最外层dom添加ref="container"，给table添加ref="orderTable"，并将上面定义的table高度绑定到table上:height="tableHeight"

在这里插入图片描述
2.定义函数

	calHeight() {
      this.$nextTick(() => {
        //获取外层元素
        const rect = this.$refs.container.getBoundingClientRect()
        //计算高度
        this.tableHeight = rect.height-300
        //对table进行重新布局
        this.$refs.orderTable.doLayout();
        console.log('this.tableHeight',this.tableHeight)
      })
    },

在这里插入图片描述
4.在mounted()、beforeUpdate() 、beforeDestroy() 中调用

  mounted(){
    window.addEventListener('resize', this.calHeight)
  },
  beforeUpdate() {
    this.calHeight()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calHeight)
  },

在这里插入图片描述