el-table 动态修改高度， 封装mixins

mixins如下，通过监听页面的resize事件，当页面视窗大小变化的时候，
动态将当前视窗高度减去固定的高度值，使得table能够动态滑动。

export default (config) => {
  const {
    subtractHeight = 250,
  } = config;
  return {
    data() {
      return {
        subtractHeight,
        // 列表高度
        tableHeight: `${document.body.clientHeight - this.subtractHeight}px`,
      };
    },
    created() {
      window.addEventListener('resize', this.getHeight);
      // 监听事件注销，防止内存溢出
      this.$once('hook:beforeDestory', () => {
        window.removeEventListener('resize', this.getHeight);
      });
    },
    mounted() {
      this.getHeight();
    },
    watch: {
      subtractHeight: {
        handler() {
          this.getHeight();
        },
      },
    },
    methods: {
      /**
       * @todo 获取列表高度
       */
      getHeight() {
        this.tableHeight = `${document.body.clientHeight - this.subtractHeight}px`;
      },
    },
  };
};

vue组件中使用方式为

<a-table
      id="aTable"
      v-loading="tableLoad"
      :height="tableHeight"
      :columns="columns"
      :row-class-name="tableRowClassName"
      :data="list"
      @cell-dblclick="dblclick"
      @row-contextmenu="rightClick"
    >
.....

import Heightmixin from '@/mixins/tableHeight-mixin';

const initalSubsubtractHeight = 570;
const heights = new Heightmixin({
  subtractHeight: initalSubsubtractHeight,
});
export default {
  	mixins: [heights],
	// 涉及到搜索列表的展开和折叠，可能需要动态更改subtractHeight,此时可以进行方法传递。
	// 通过watch来进行table动态的更改。
	showFormFun() {
	  this.showForm = !this.showForm;
	  this.subtractHeight = this.showForm ? initalSubsubtractHeight : 232;
	},
}

总结：方法感觉还不是特别完善，已经算是满足要求了，应该还有好多可以抽离成mixin的方法，
动态监听表格高度只是其一，欢迎大家指教。