zcloud-ui/lib/mixins/tableAutoHeight.js

A Component Library for Vue.js.

'use strict';

exports.__esModule = true;

var _lodash = require('lodash');

exports.default = {
  data: function data() {
    return {
      tableContainer: 'document',
      tableHeight: 0,
      tablelimitHeight: 0
    };
  },

  methods: {
    countTableHeight: function countTableHeight() {
      var _this = this;

      var $table = this.$refs['my-table'].$el;
      var clientTop = $table && $table.getBoundingClientRect().top;
      var offsetTop = $table && $table.offsetTop;
      var limitH = this.tablelimitHeight + 50;
      var elHeight = null;
      switch (this.tableContainer) {
        case 'document':
          elHeight = window.innerHeight - clientTop - limitH;
          this.$nextTick(function () {
            _this.tableHeight = elHeight;
          });
          break;
        case 'dialog':
          var $dialogHeader = document.querySelector('.el-dialog__header');
          var $dialogbody = document.querySelector('.el-dialog__body');
          var bodyHeight = parseInt(window.getComputedStyle($dialogbody, null).getPropertyValue('max-height'));
          elHeight = bodyHeight - (offsetTop - $dialogHeader.clientHeight) - limitH;
          this.$nextTick(function () {
            _this.tableHeight = elHeight;
          });
          break;
        default:
          break;
      }
    }
  },
  mounted: function mounted() {
    if (this.$refs['my-table']) {
      this.countTableHeight();
      var debounceFunc = (0, _lodash.debounce)(this.countTableHeight.bind(this), 500);
      window.addEventListener('resize', debounceFunc);
      this.$once('hook:beforeDestroy', function () {
        window.removeEventListener('resize', debounceFunc);
      });
    }
  }
}; /**
    * table 高度自动计算
    * table ref必须是'my-table',
    * 使用mixin后 加table属性 :max-height="tableHeight"
    */