vue+element table组件固定表头 高度根据浏览器窗口大小展示

根据窗口实时改变

export default {
    data(){
        return {
            tableHeight: 50,
            tableData: []
        }
    },
    mounted:function(){
        this.$nextTick(function () {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50;
            
            // 监听窗口大小变化
            let self = this;
            window.onresize = function() {
                self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 50
            }
        })
        //this.$refs.table.$el.offsetTop:表格距离浏览器的高度     //50表示你想要调整的表格距离底部的高度(你可以自己随意调整),因为我们一般都有放分页组件的,所以需要给它留一个高度 
    }
}

原文地址:https://www.cnblogs.com/muou2125/p/9952491.html

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容