Vue初始化页面高度无效

项目场景：

项目场景：前端框架使用ElementUI，页面包含表格，加载数据后，设置表格父级控件高度为填充页面最大高度。页面布局为基本布局，如下图：

---

问题描述

从后台接口获取数据后，在接口回调函数中调用设置高度函数，设置页面高度无效，dom函数如getElementsByClassName调用异常。
设置高度js代码：

export default {
  mounted() {
    this.height = this.fixHeight()
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.height = this.fixHeight()
    },
    fixHeight() {
      const parentEl = this.$parent.$el
      const parentHeight = parentEl.offsetHeight
      // header 高度
      const header = parentEl.getElementsByClassName('theme-header')
      let headerHeight = 0
      if (header && header[0]) {
        headerHeight = header[0].offsetHeight || 60
      }
      // tab 高度
      const tabs = parentEl.getElementsByClassName('theme-tabs ')
      let tabHeight = 0
      if (tabs && tabs[0]) {
        tabHeight = 40
      }
      return parentHeight - headerHeight - tabHeight
    }
  }
}

页面中引用：

import FixHeight from '@/mixins/height'
export default {
    mixins: [FixHeight],
    created() {
      this.loadData()
    },
    methods: {
   	  loadData() {
	   	  request({
	          url: '/query',
	          method: 'post',
	          data: params
	        }).then(response => {
	        	this.fixHeight();
	        }）
   	  }
    }
}

---

原因分析：

从后台接口获取数据后，dom加载完成前已经执行设置高度函数，导致设置高度无效，以及dom函数调用异常。

---

解决方案：

确保在dom加载完成后调用设置高度函数，将设置高度函数置于
nextTick()方法内，代码如下：

this.$nextTick(() => {
	this.fixHeight();
})