yiliangyiyun-pc-jj/src/layout/TableView.vue

<script>
/*
 * @Author: yolo
 * @Date: 2020-05-13 10:36:04
 * @Last Modified by: Yolo
 * @Last Modified time: 2020-12-24 15:18:03
 * 应用于表格视图
 */
export default {
  name: 'TableView',
  data () {
    return {
      tableViewBodyDom: null,
      interval: null,
      bodyHeight: 100,
      isShowHeader: false
    }
  },
  computed: {
    isShow () {
      return this.$slots.header
    }
  },
  methods: {
    setHeight () {
      if (this.tableViewBodyDom) {
        setTimeout(() => {
          const height =
            document.body.clientHeight -
            (this.$refs.header ? this.$refs.header.offsetHeight : 0) -
            this.getTopHeight() -
            (this.$refs.footer ? this.$refs.footer.offsetHeight : 0)
          height && this.bodyHeight !== height && this.bodyHeightChange(height)
        }, 300)
      }
    },
    /**
       兼容页面多个头不能动态计算的问题
     */
    getTopHeight () {
      let height =
        (document.getElementsByClassName('navBar').length > 0
          ? document.getElementsByClassName('navBar')[0].offsetHeight
          : 0) +
        (document.getElementsByClassName('title-line-height').length > 0
          ? document.getElementsByClassName('title-line-height')[0].offsetHeight
          : 0) + 40
      return height
    },
    bodyHeightChange (newHeight) {
      this.bodyHeight = newHeight
      this.$emit('body-height-change', newHeight)
    },
    /**
     * 安装 table body height 监视器
     */
    installBodyHeightMonitor () {
      // console.info(this.$el)
      this.bodyHeight = 90
      this.beforeDestroyed()
      this.interval = setTimeout(() => {
        this.setHeight()
        this.installBodyHeightMonitor()
      }, 800)
    },
    /**
     * 安装 table body height 监视器
     */
    uninstallBodyHeightMonitor () {
      clearTimeout(this.interval)
    },
    beforeDestroyed () {
      this.uninstallBodyHeightMonitor()
    }
  },
  mounted () {
    this.tableViewBodyDom = this.$refs.tableViewBody
    this.setHeight()
    this.installBodyHeightMonitor()
  },
  destroyed () {
    this.beforeDestroyed()
  }
}
</script>

<template>
  <section ref="tableView"
           class="table-view">
    <header ref="header">
      <slot name="header"></slot>
    </header>
    <div class="table-view__body"
         ref="tableViewBody">
      <slot v-if="bodyHeight"
            name="body"></slot>
      <footer ref="footer">
        <slot name="footer"></slot>
      </footer>
    </div>
    <slot></slot>
  </section>
</template>

<style lang="scss" scope>
.table-view {
  // display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 150px;
  // margin-top: 1px;
  max-height: 100%;
  header {
  }
  &__body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background: #fff;
    overflow-x: hidden;
  }
  // footer {
  //   padding-top: 8px;
  // }
  .pagination-container {
    margin-top: 0 !important;
    padding: 5px;
  }
  .el-pagination {
    margin-bottom: 0 !important;
  }
  .maintenance-overview {
    padding: 0 !important;
  }
}
</style>