Vue 中盒子隨window視窗動態給高度、自適應表格高度

1.html

       1.
      <div id="base-form" class="panel-center active panel-right" :style="{height:contentHeight + 'px’}”></div>
      2. 
      <div class="elx-pagination-table">
                  注意一下js 換成對應的ID，及變量tableHeight
                 <el-table id="taskTable" class="dic-table" highlight-current-row v-loading="tableLoading" :data="tableData" :height="tableHeight"  style="width: 100%;" >
                        。。。
                  </el-table>
            </div>

2.css

// 添加這段代碼主要是固定表頭，內容隨機滾動，
.elx-pagination-table .el-table__header-wrapper {
    overflow: hidden;
}
.elx-pagination-table .el-table th>.cell {
    white-space: nowrap;
    /*overflow: initial;*/
    overflow: hidden;
}

js

在mounted中調用以下代碼

mounted:function () {
    var self = this;
    this.$nextTick(function () {
        self.addWindowResizeListener();
    });
},
beforeDestroy:function () {
    this.removeWindowResizeListener();
}

3.在method中

addWindowResizeListener: function () {
    if( window.addEventListener){
        window.addEventListener('resize',this.resizeDom )
    }else if( window.attachEvent ){
        window.attachEvent('onresize',this.resizeDom )
    }
},
removeWindowResizeListener: function () {
    if( window.removeEventListener){
        window.removeEventListener('resize',this.resizeDom )
    }else if( window.detachEvent ){
        window.detachEvent('onresize',this.resizeDom )
    }
},
resizeDom:function () {
//base-form 指定動態高度的ID，contentHeight：動態高度的變量
    _.pageHeightFit(this, 'contentHeight', 'base-form', 0);
},

pageHeightFit 是一個全局的Js ，需要引入進來，我這里只寫了js 里面的內容

_.pageHeightFit = function(vm, val, id, bottomHeight){
	bottomHeight = typeof bottomHeight == 'number' ? bottomHeight : 50;
	if($("#"+id).length>0){
		vm[val] = parseFloat($(window).height()) - parseFloat($("#"+id).offset().top) - bottomHeight;
	}
}
_.pageResizeHeightFit = function(vm, val, id, bottomHeight){
	bottomHeight = typeof bottomHeight == 'number' ? bottomHeight : 50;
	_.pageHeightFit(vm, val, id, bottomHeight);
	$(window).on("resize", function(){
		if($("#"+id).length>0){
			vm[val] = parseFloat($(window).height()) - parseFloat($("#"+id).offset().top) - bottomHeight;
		}
	});
} 

效果