el-table自适应

实现效果:分页永远贴着浏览器底部,放大和缩小浏览器大小,数据显示增多和减少
1、缩小
在这里插入图片描述
2、放大在这里插入图片描述
实现过程:
1、el-table标签内添加ref="sortTable":height="sortTableHeight"
2、定义sortTableHeight: 350

<el-table
   ref="sortTable"
   :height="sortTableHeight"
   style="width: 100%;"
   border
   :row-style="tableRowClassName"
   :stripe="false"
   :header-cell-style="{background: '#EBEEF5',border: '0px solid #DDDDDD',height: '10px',color:'#2B579A'}"
   :data="tableData">
   <el-table-column v-for="(item,index) in tableDataTitle"
                    :show-overflow-tooltip="true"
                    :key="index"
                    :prop=tableDataTitle[index]
                    :label=tableDataTitle[index]
                    width="auto">
   </el-table-column>
 </el-table>

3、添加方法getTableHeight,然后把方法挂载到mounted,初始化页面的时候调用。如果是子组件的话,需要在父组件调用此方法。自己调整exceptHeight ,调整到合适的大小。

/*表格自适应高度*/
    getTableHeight(){
      this.$nextTick(function () {
        let exceptHeight = 380;
        // this.$refs.table.$el.offsetTop:表格距离浏览器的高度
        if(this.$refs.sortTable.$el){
          this.sortTableHeight = window.innerHeight - this.$refs.sortTable.$el.offsetTop - exceptHeight;
        }

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

版权声明:本文为weixin_46359814原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。