el-table form highly adaptive

<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;
                }
            }
        });
    }
}

Transfer: https://blog.csdn.net/weixin_41725862/article/details/90439463

Guess you like

Origin www.cnblogs.com/maggieq8324/p/12313885.html