• element table固定表头,表的高度自适应解决方法


    主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应。

    标签:

    <el-table ref="table" :data="tableData" :height="tableHeight"></el-table>

    vue中的ref解释

    第一种JS处理方式:

    export default {
        data(){
            return {
                tableHeight: 50,
                tableData: []
            }
        },
        mounted:function(){
            setTimeout(() => {
                this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop;
            },100)
         //此处需要通过延迟方法来设置值,不然会出现值已更新,但页面没更新的问题 //this.$refs.table.$el.offsetTop:表格距离浏览器的高度 } }

    第二种JS处理方式:

    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表示你想要调整的表格距离底部的高度(你可以自己随意调整),因为我们一般都有放分页组件的,所以需要给它留一个高度  } }

    this.$nextTick的使用说明

  • 相关阅读:
    Spring 学习笔记(4)依赖注入 DI
    05Spring之AOP
    01Spring核心概念
    06Spring之循环依赖
    04Spring之依赖注入
    09Spring 设计模式总结
    08Spring之事务
    01Servlet 回顾
    03Spring之Bean生命周期
    02Spring启动过程
  • 原文地址:https://www.cnblogs.com/muou2125/p/9952491.html
Copyright © 2020-2023  润新知