Vue2+Element-ui实现el-table表格自适应高度

效果图

代码

export default {
  data() {
    return {
      tableHeight: 0
    }
  },
  mounted() {
    this.calculateAndSetHeight()
  },
  methods: {
    calculateAndSetHeight(time = 500) {
      if (this.$refs.tableRef) {
        const el = this.$refs.tableRef.$el
        const calculateHeight = () => {
          const windowHeight = window.innerHeight
          const topOffset = el.getBoundingClientRect().top
          const otherElementsHeight = 39
          let paginationHeight = 0
          const paginationRef = this.$refs.paginationRef
          if (paginationRef && paginationRef.totalPage) {
            paginationHeight = 55
          }
          this.tableAutoHeight = `${
            windowHeight - topOffset - otherElementsHeight - paginationHeight
          }px`
        }
        const throttledCalculateHeight = _.debounce(calculateHeight, time)
        throttledCalculateHeight()
        const appElement =  document.querySelector('.hasTagsView'); // hasTagsView为右侧视图box 监听右侧视图变化
        const resizeObserver = new ResizeObserver(throttledCalculateHeight)
        if (appElement) {
          resizeObserver.observe(appElement)
        }
        this.$once('hook:destroyed', () => {
          if (appElement) {
            resizeObserver.unobserve(appElement)
          }
          resizeObserver.disconnect()
        })
      }
    }
  }
}

页面使用：

<el-table ref="tableRef" :height="tableHeight">

<el-pagination v-if="total > 0" ref="paginationRef">
</el-pagination>

感谢你的阅读，如对你有帮助请收藏+关注！
只分享干货实战和精品，从不啰嗦！！！
如某处不对请留言评论，欢迎指正~
博主可收徒、常玩QQ飞车，可一起来玩玩鸭~