在不同大小屏幕页面动态改变el-table的最大高度

1.页面布局

思路:用最外层div的clientHeight减去除了table的其他几个部分的clientHeight

2.对应代码

<template>
  <div class="pointConfig">
    <div class="right-container" ref="rightContainer">
      <div class="header-container" ref="rightHeader">
      </div>
      <div class="condition-container" ref="rightCondition">
      </div>
      <div class="table-container">
        <el-table
          :max-height="table_maxHeight"
          :data="table_data"
        >
          <el-table-column
            fixed
            prop="measureName"
            label="测点名称"
            width="150"
            show-overflow-tooltip
          >
        </el-table>
        <BasePagination
          :pageObj="pageObj"
          @query="getPointList"
          ref="rightPagination"
        ></BasePagination>
      </div>
    </div>
  </div>
</template>

<script>
import BasePagination from '@/view/point/component/BasePagination.vue'
import service from '@/api/point/index'
export default {
  name: 'pointManage',
  components: { BasePagination},
  data() {
    return {
      table_maxHeight: 0,
    }
  },
  created() {
    this.getPointList()
  },
  mounted() {
    this.$nextTick(() => {
      this.resetTableMaxHeight()
    })
    window.addEventListener('resize', this.resetTableMaxHeight)
  },
  methods: {
    // 获取标准名称列表
    async getPointList() {
      const data = {}
      await service
        .getPointList(data)
        .then((res) => {})
        .finally(() => {
          this.resetTableMaxHeight()
        })
    },
    resetTableMaxHeight() {
      const rightContainerHeight = this.$refs.rightContainer.clientHeight
      const rightHeader = this.$refs.rightHeader.clientHeight
      const rightCondition = this.$refs.rightCondition.clientHeight
      const rightPagination = this.$refs.rightPagination.$refs.page.clientHeight
      this.table_maxHeight =
        rightContainerHeight -
        rightHeader -
        rightCondition -
        rightPagination -
        70
    },
  },
}
</script>
<style lang="less" scoped>
@import '../../assets/css/point.less';
.pointConfig {
  height: 100%;
  background: #eef0f3;
  box-sizing: border-box;
  .right-container {
    flex: 1;
    z-index: 0;
    height: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
    border-radius: 0px 4px 4px 0px;
    padding: 0 20px 20px;
    .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid #dadada;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 550;
      color: #191919;
    }
    .condition-container {
      margin-top: 20px;
      .el-select,
      .el-input {
        margin-right: 12px;
        margin-bottom: 10px;
      }
    }
    .table-container {
      margin-top: 10px;
      .opt-btn {
        padding: 9px 0;
      }
    }
  }
}
</style>