element el-table高度自适应

mainHeightMixins.js

import { on, off } from '@/lib/tools'
export const maxHeightData = {
  data() {
    return {
      maxHeight: 500,
    }
  },

  methods: {
    getmaxHeight() {
      let mainEle = document.querySelector('.jz-layout-content') // 可显示区域
      let mainHeight =
        (mainEle && (mainEle.offsetHeight || mainEle.clientHeight)) || 770
      this.maxHeight = mainHeight - 84
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getmaxHeight()
    })
    on(window, 'resize', this.getmaxHeight)
  },
  beforeDestroy() {
    off(window, 'resize', this.getmaxHeight)
  },
}

@/lib/tools

/**
 * @description 绑定事件 on(element, event, handler)
 */
export const on = (function () {
  if (document.addEventListener) {
    return function (element, event, handler) {
      if (element && event && handler) {
        element.addEventListener(event, handler, false)
      }
    }
  } else {
    return function (element, event, handler) {
      if (element && event && handler) {
        element.attachEvent('on' + event, handler)
      }
    }
  }
})()

/**
 * @description 解绑事件 off(element, event, handler)
 */
export const off = (function () {
  if (document.removeEventListener) {
    return function (element, event, handler) {
      if (element && event) {
        element.removeEventListener(event, handler, false)
      }
    }
  } else {
    return function (element, event, handler) {
      if (element && event) {
        element.detachEvent('on' + event, handler)
      }
    }
  }
})()

系统页面引用

import { maxHeightData } from './mainHeightMixins'
export default {
  mixins: [maxHeightData],
}

<el-table :height="maxHeight">el-table>