解决vue2 表格自适应

 实现效果

 

body代码

给el-table一个属性： :max-height='maxHeight'

<temalate>
<div  class="auto_content">
// 表格
 <div class="table" ref="tableRef">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :max-height="maxHeight"
        border
        append-to-body
        @selection-change="selectCheckbox"
        @select-all="selectAllBox"
        v-loading="loading"
        highlight-current-row
      >
表格内容
 </el-table>
    </div>
// 分页区域
   <div class="page-container">
      <el-pagination
        :current-page="pagination.page"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @current-change="currentChange"
        @size-change="sizeChange"
      >
      </el-pagination>
    </div>
</div>


</temalate>

css代码   弹性盒布局，给table  flex:1

.auto_content {
  margin-left: 20px;

  .shuru_input {
    width: 540px !important;
    margin-right: 10px !important;
  }
}
.btn_wrap {
  margin: 20px;
}
.table {
  margin: 0px 20px;
  flex: 1;
}
.page-container {
  padding-top: 10px;
  border-top: 1px solid #ddd;
  width: 100%;
  height: 60px;
  background-color: #fff;
}

js代码   在生命周期mounted动态监听变化的高度

  mounted() {
    this.$nextTick(() => {
      this.maxHeight = this.$refs.tableRef.clientHeight;
    });
  },