element-ui el-tabs 和 el-table混合使用的问题
最近在使用vue的element-ui前端框架中的el-tabs和el-table混合使用，发现了很多小问题。
1、问题一：el-tabs会使el-tab-pane 下面的数据一次性加载出来，导致数据更新不及时
刚开始写的代码时这样的，发现页面加载的时候，会把两个tab的页面的请求一次性加载出来。如果tab页面过多，会导致请求过多，造成页面卡顿，最重要的是页面数据实时变化的话不能及时获取到最新数据。
对此问题，使用了v-if来解决，每次对
一开始只设置其中一个为true其他都为false，当点击tab切换时去改变v-if的值，这样就可以解决上面的问题，首次加载页面只会渲染其中一个tab的内容，同时点击tab切换时页面重新渲染页面。
2、问题二：el-tabs 下实时加载表格，只有第一个tab的加载loading显示出来，其他的loading都有没效果显示
< !-- custom-table子组件内代码 -->
...
在上面的
用table的doLayout没有解决这个问题。
去网上找看看其他人有没有遇到过这个问题都没找到，忽然看到这么一句话：element-ui很多问题用nextTick和setTimeout都能解决的。
随后我改了下我的代码
async getDataList() {
this.loading = true
// let res = await getListRequest()
// 处理数据渲染在table上
setTimeout(()=>{
this.loading = false
},300)
},完美解决切换tab转圈加载不显示的问题。
3、问题三：el-tabs切换el-table造成页面抖动的问题
看到网上其他人给了解法
beforeUpdate() {
this.$nextTick(() => {
this.$refs['tableRef'].doLayout()
})
}设置了没有起作用。
后来发现因为我表格渲染数据的垂直方法出现了滚动条，el-table表格抖动的问题解决了，但是页面抖动的问题还是没有解决。
导致表格table出现抖动的原因是页面出现重绘。
el-table表格抖动的解决办法有
动态切换表头的时候闪烁是因为表头重新计算高度导致的，重写表格样式即可
//重写表格样式，不在自动计算，解决表格渲染时闪烁问题
//不写这个使用v-if重新渲染表格的时候会再次计算下宽高，导致了抖动div高度=table容器高度/行数
.el-table .cell{
height:20px!important;
}
注意：这个方式会把每行高度写死，页面的高度就不会发生变化，滚动条也不会突然出现或者突然消失。但是多余的内容就显示不全了。
表头变动的时候数据可能会下掉，使用element中的dolayout函数解决
element中写到：doLayout方法 对table进行重新布局。当Table或其祖先元素由隐藏切换为显示时，可能需要调用此方法
beforeUpdate(){
this.$nextTick(() => {
this.$refs['tableRef'].doLayout();
})
}设置表格宽度为99.9%，要加上!important，不然css样式不起效果。
.el-table{
width:99.9%!important;
}el-table抖动可以用上述方式解决，页面的抖动没有办法用上述方式解决。
页面抖动的解决办法
因为页面内容长度超出了可视区域，出现了竖向滚动条。
页面抖动的原因是：1.el-tab页面切换的时候会出现重绘；2.页面有滚动条，造成抖动的部分就是滚动条的宽度，出现抖动的时候是要出滚动条的那个点。
给页面的最外层的标签设置宽度100% - 滚动条的宽度，发现页面还是出现抖动，加载完成后，页面宽度没有铺满全屏，少了滚动条的宽度。
不论设置width是多少百分比，把浏览器刷新或者浏览器宽度往小缩或往外拉的时候，竖向滚动条刚好要消失或刚好出现的时候，都会触发抖动的现象。
为解决页面抖动就不懂让页面的垂直方向出现滚动条，为此，只能让页面的子元素出现滚动条，给el-table设置了高度，让表格在页面内滚动，而不是整个页面滚动。
4、问题四：当出现多个el-tab时，里面的el-table加载总是会实实在在的看到表格宽度的变化，让用户体验不是很好。
在切换tab的事件中使用：
handleTabClick() {
setTimeout(()=>{
this.$refs['tableRef'].doLayout()
},200);
}5、问题五：el-table用v-if实现 el-table-column的更多列隐藏、显示；切换的时候表格列数据错乱。
导致问题的原因：el-table的列是基础循环出来的，vue在dom重新渲染时有一个性能优化机制，相同dom会被复用，所以给每一个列加了一个特定的key，确定了列的唯一性，就可以解决。