el-table表格高度自适应


<el-table
    stripe
    ref="table"
    :data="table.tableData"
    border
    size="mini"
    :height="table.tableHeight"
    :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}">
</el-table>    
export default {
    data(){
        return {
           table:{
	           tableData: [],
	           tableHeight: $(window).height() - 440
	       },
        }
    },
    mounted:function(){
        this.$nextTick(function () {
			let exceptHeight = 157;
			// this.$refs.table.$el.offsetTop:表格距离浏览器的高度
			if(this.$refs.userClusteringTable.$el){
				this.table.tableHeight = window.innerHeight - this.$refs.userClusteringTable.$el.offsetTop - exceptHeight;
			}

			// 监听窗口大小变化
			let self = this;
			window.onresize = function() {
				if(self.$refs.userClusteringTable.$el){
					self.table.tableHeight = window.innerHeight - self.$refs.userClusteringTable.$el.offsetTop - exceptHeight;
				}
			}
		});
    }
}

转自:https://blog.csdn.net/weixin_41725862/article/details/90439463


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM