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

Vue.directive('height', {
  inserted(el, _binding, vnode) {
    const paginationRef = vnode.context.$refs.paginationRef
    const calculateHeight = () => {
      const windowHeight = window.innerHeight
      const topOffset = el.getBoundingClientRect().top
      const otherElementsHeight = 40 
      let paginationHeight = 0
      if (paginationRef && paginationRef.totalPage) {
        paginationHeight = 55
      }
      el.style.height = `${
        windowHeight - topOffset - otherElementsHeight - paginationHeight
      }px`
    }
    const debouncedCalculateHeight = _.debounce(calculateHeight, 500)
    debouncedCalculateHeight()
    window.addEventListener('resize', debouncedCalculateHeight)
    el.__vueHeightDirective__ = debouncedCalculateHeight
  },
  unbind(el) {
    window.removeEventListener('resize', el.__vueHeightDirective__)
    delete el.__vueHeightDirective__
  }
})

<div v-height>
   	<el-table height="100%">
		</el-table-column>
	</el-table>
</div>

<el-pagination ref="paginationRef">
</el-pagination>

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

export default {
  data() {
    return {
      tableHeight: 0
    }
  },
  mounted() {
    this.calculateAndSetHeight()
  },
  methods: {
    calculateAndSetHeight() {
      if (this.$refs.tableRef) {
        const el = this.$refs.tableRef.$el
        const calculateHeight = () => {
          const windowHeight = window.innerHeight
          const topOffset = el.getBoundingClientRect().top
          const otherElementsHeight = 40
          let paginationHeight = 0
          const paginationRef = this.$refs.paginationRef
          if (paginationRef && paginationRef.totalPage) {
            paginationHeight = 55
          }
          this.tableHeight = `${
            windowHeight - topOffset - otherElementsHeight - paginationHeight
          }px`
        }
        const throttledCalculateHeight = _.debounce(calculateHeight, 500)
        throttledCalculateHeight()
        window.addEventListener('resize', throttledCalculateHeight)
        // 在组件销毁时移除事件监听器
        this.$once('hook:destroyed', () => {
          window.removeEventListener('resize', throttledCalculateHeight)
        })
      }
    }
  }
}

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