iview/element table组件高度动态设置

最新推荐文章于 2024-08-12 10:45:55 发布

QQ帝国

最新推荐文章于 2024-08-12 10:45:55 发布

阅读量1.8k

点赞数 1

分类专栏： # Vue2.6+

本文链接：https://blog.csdn.net/QQ_Empire/article/details/84973942

版权

Vue2.6+ 专栏收录该内容

174 篇文章 8 订阅

订阅专栏

一、组件

<Table highlight-row border :columns="columns7" :data="data6" ref="table" :height="tableHeight"></Table>

二、data数据

tableHeight: null,

三、mounted 钩子

mounted() {

    let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度
    let topH = this.$refs.elememtHeight.offsetTop;//表格距浏览器顶部距离
    let tableHeight =(h - topH)*0.72  //表格应该有的高度   乘以多少可自定义
    this.tableHeight = tableHeight;
   
  },

window.innerHeight 是浏览器的可用高度

this.$refs.elememtHeight.offsetTop 是表格距离浏览器可用高度顶部的距离