elementui中el-collapse中嵌套el-table展开时底部回弹一小段问题

1、问题描述

在实验室项目开发中遇到这个问题：elementui中组件折叠面板el-collapse，在其中嵌套使用el-table，当点击el-collapse-item展开时，底部表格会回弹一部分高度。

2、问题讨论

问题产生原因： 在collapse关闭时table会根据collapse高度0来重新计算高度（因为table不定高度，定高度了就不会出现此问题），而在下次collapse展开的时候，collapse会首先获取内容高度，这时候获取的高度，是根据table父容器0计算出来的高度，有问题，等动画做完了，父元素高度移除了，才重新计算了一边恢复程序。

该问题在element的源码中，有个$ready属性，值为true/false，值为false时可以取消table的高度计算监听

3、原始代码：

      <el-collapse>
        <el-collapse-item title="藏品详细信息" style="margin-left:10px;">
          <el-table :data="returnData" border class="table">
            <el-table-column>...</el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>

4、解决问题：

4.1、template

<el-collapse v-model="activeNames" @change="collaspeChange">
  <el-collapse-item title="详细信息" style="margin-left:10px;" name="1">
      <el-table :data="returnData" border class="table" ref="collapseTable">
        <el-table-column>...</el-table-column>
      </el-table>
  </el-collapse-item>
</el-collapse>

4.2、script

watch: {
  activeNames(newVal) {
    this.$refs.collapseTable.$ready = false
  }
},



data() {
   return {
      activeNames: ['1']
   }
}