先说明一下背景：element框架，这个页面的结构是有两个标签页，下面各有一个表格el-table。
做了一个使表格自适应窗口高度，合计和分页器固定在屏幕下方的组件，用混入的方式引入组件。
组件的方法主要是：表格max-height=窗口高度 - document.querySelector('.el-table').getBoundingClientRect().top - 60（固定高度，分页器使用）
然后发生以下问题：
1. 页面渲染之后，改变窗口大小，页面会出现两条滚动条，寻找原因，发现改变窗口大小时，混入对象的height值改变了，但是组件的height值没有改变。
混入对象中的监听，在这里打印this.height值，会随着窗口大小改变而改变。
watch: {
height(val) {
this.height = val
}
},
组件中的height使用，打印发现不会随窗口改变而改变。混入对象的height变了也没变 。
<el-table :data="list.items" v-loading='listLoading' :max-height="height">
这个问题，没有想到解决的方法，然后直接操作dom来改变：
watch: {
height(val) {
this.height = val
document.getElementsByClassName('el-table')[0].style.maxHeight = val + 'px'
}
},
然后发现对于第二个标签页没有生效。
发现，在第一个标签打印document.querySelector('.el-table').getBoundingClientRect().top，有高度，在第二个标签页，在打印同样的值，为0。
原因是这里打印的都是第一个标签页的table。这是因为querySelector会返回命中的第一个元素。需要用querySelectorAll来选中。
这样，就可以通过这个值来判断哪个标签页是active的。
。。。。。后来。。。。。。。。。。发现这个使用dom操作来改变el-table的maxheight滚动条会有问题。。。。继续寻找方法。。。