table表格自适应高度

/**
 * @description: 公共页面的padding margin
 */
export const pageMargin = 20 + 20

export default {
  data() {
    return {
      tableHeight: null // 表格高度,用于自适应(初始值必须为null)
    }
  },
  activated() {
    if (!this.$root.isQiankun) {
      this.resizeTableHeight()
    }
  },
  mounted() {
    if (!this.$root.isQiankun) {
      this.resizeTableHeight()
    }
  },
  methods: {
    /**
     * @description: 监听窗口变化，动态设置表格高度
     */
    resizeTableHeight() {
      // console.log(123123)
      this.setTableHeight()
      const elementResizeDetectorMaker = require('element-resize-detector') // 监听元素长宽变化的插件
      const listener = elementResizeDetectorMaker()
      const appWrapper = document.querySelector('.app-main')
      listener.listenTo(appWrapper, element => {
        this.setTableHeight()
      })
      this.$on('hook:beforeDestroy', () => {
        listener.uninstall(appWrapper)
      })
    },

    /**
     * @description: 设置表格高度
     */
    setTableHeight() {
      this.$nextTick(() => {
        const appMain = document.querySelector('.app-main')
        if (!this.$refs['tableTitle']) {
          return
        }
        const wrapHeight = appMain.offsetHeight // 容器总高度
        const searchBoxHeight = document.querySelector('.search-form')
          ? document.querySelector('.search-form').offsetHeight
          : 0 // 头部搜索的高度
        const headerHeight = this.$refs['tableTitle'].$el.offsetHeight // 标题高度
        const pageBarHeight = this.$refs['page-bar'] ? this.$refs['page-bar'].$el.offsetHeight : -20 // 分页组件高度

        this.tableHeight =
          wrapHeight -
          // pageTitleHeight -
          headerHeight -
          searchBoxHeight -
          pageBarHeight -
          pageMargin

        // console.log(this.tableHeight, 12345)
        this.layoutTable()
      })
    }
  }
}