element tab切换 table 高度和宽度变化

个人记录： tab切换 table 高度和宽度变化
原因：1. table的父级容器不能用flex布局，不然在切换的时候 宽度一直增减
2.tab 的切换是 display 的属性切换
解决办法：
1. 在 el-tab-pane 包含的子组件 用if来限制
2. 在父组件 tab切换的时候 调用 子组件 获取数据的 方法

  // tab 切换
        handleClick() {
            // 直接调用子组件初始化方法 避免 子组件 table 高度塌陷 有个bug 每次切换后 宽度一直增加(原因是父级容器用flex 布局了) ，子组件调用的时候 用 v-if=
            setTimeout(()=>{
                this.$refs[this.activeName].initTableData(this.subprojectId)
            })
        },
	 <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
        >
        <el-tab-pane label="测评信息" name="first">
            <InformationTable
              v-if="activeName === 'first'"
              ref="first"
              :subprojectId="subprojectId"
            ></InformationTable>
        </el-tab-pane>
        <el-tab-pane label="原始数据" name="second">
            <OriginalTable
              v-if="activeName === 'second'"
              ref="second"
              :subprojectId="subprojectId"
            ></OriginalTable>
        </el-tab-pane>
 	 </el-tabs>

还有个解决方法：但是有个bug 在浏览器里 一直打印 doLayout undefined，但是效果功能都能使用。如果有大佬知道这个方法解决这个报错的 请告诉我下 谢谢

// 父组件
		<el-tabs
          v-model="activeName"
          @tab-click="handleClick"
        >
        <el-tab-pane label="测评信息" name="first">
            <InformationTable
              :subprojectId="subprojectId"
              :activeName="activeName"
            ></InformationTable>
        </el-tab-pane>
        <el-tab-pane label="原始数据" name="second">
            <OriginalTable
              :subprojectId="subprojectId"
               :activeName="activeName"
            ></OriginalTable>
        </el-tab-pane>
 	 </el-tabs>
handleClick(){
// 什么都不干
}

// 子组件的 mixins
props:{
 	activeName: {
            type: String,
            default:''
       },
},
watch:{
	 activeName: function (v) {
            switch (v) {
                case 'first':
                    this.$nextTick(() => {
                            this.$refs.informationTable.doLayout()
                    })
                    break;
                case 'second':
                    this.$nextTick(() => {
                        this.$refs.originalTable.doLayout()
                    })
                    break;
                case 'third':
                    this.$nextTick(() => {
                        this.$refs.messageTable.doLayout()
                    })
                    break;
                default:
                    this.$nextTick(() => {
                        this.$refs.videoTable.doLayout()
                    })
                    break;
            }
        } 
        // 监听tab切换 重新刷新渲染表格 不然表格高度会缩小 有个bug 控制台一直报错 doLayout undefined,
}