iview table动态改变表格高度二次封装

<template>
  <div class="cus-table">
    <Table
      ref="tDom"
      :border="border"
      :stripe="stripe"
      :size="size"
      :loading="loading"
      :columns="columns"
      :data="data"
      :width="width"
      :height="tableHeight"
      @on-row-click="onRowClick"
      @on-select-all="onSelectAll"
      @on-selection-change="onSelectionChange"
      @on-select-cancel="onSelectCancel"
      @on-select-all-cancel="onSelectAllCancel"
    >
      <template
        v-for="column in columns"
        slot-scope="{ row, index }"
        :slot="column.slot"
      >
        <slot
          :name="column.slot"
          :row="row"
          :index="index"
          v-if="column.slot"
        ></slot>
      </template>
    </Table>
  </div>
</template>
  
<script>

/**
 * @columns Table表头
 * @data    Table表格数据
 * @loading 表格懒加载
 * @width   表格宽度，单位 px
 * @height  表格高度
 * @border  是否显示纵向边框
 * @stripe  是否显示间隔斑马纹
 * @size    表格尺寸，可选值为 large、small、default 或者不填
 */

export default {
  name: "cus-table",
  data() {
    return {
      tableHeight: 0,
    };
  },
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    width: {
      type: [String, Number],
      default: 0
    },
    height: {
      type: [String, Number],
      default: 324,
    },
    size: {
      type: [String, Number],
      default: "default",
    },
    border: {
      type: Boolean,
      default: false,
    },
    stripe: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    this.tableHeightChange();
    window.addEventListener("resize", this.tableHeightChange, true);
  },
  methods: {
    // 单击某一行时触发
    onRowClick(e) {
      this.$emit('on-row-click', e)
    },
    // 在多选模式下有效，只要选中项发生变化时就会触发
    onSelectionChange(e) {
      this.$emit('on-selection-change', e)
    },
    // 在多选模式下有效，点击全选时触发
    onSelectAll(e) {
      this.$emit('on-select-all', e)
    },
    // 在多选模式下有效，取消选中某一项时触发
    onSelectCancel(e) {
      this.$emit('on-select-cancel', e)
    },
    // 在多选模式下有效，点击取消全选时触发
    onSelectAllCancel(e) {
      this.$emit('on-select-all-cancel', e)
    },
    // 操作dom
    tableDom() {
      this.$refs.tDom.selectAll(true);
    },
    // 设置Table表头高度自适应
    tableHeightChange() {
      this.tableHeight = window.innerHeight - this.height; // 表格自适应高度
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.resizeHandle, true);
  },
};
</script>
  
<style lang="less">
</style>