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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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;
          }
        }
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18