vantabs多页渲染_页签切换多个表格table渲染错乱

一个页面中有四个切换，每个切换下面是有一个表格的，此刻的你是要用v-show 还是v-if呢

说一说我的路程：

我首先是用的v-show，优点是：刚进页面加载4个接口数据，因为业务上这块的sql比较慢，所以为了页面查询速度的优化，我选择了一次性加载4个接口，这样用户在这个页面可能会在部门页签停留几秒是很正常的，这时候调用其他三个接口花费4-5秒的时间就会被忽略，也会使页面看起来不是那么卡顿。本来以为这个方法很好，但是bug 来了

火狐54浏览器下面会出现节点错落，渲染表头宽度错乱

这个是测试测出来的，刚开始一看到我真的是一脸懵逼，出现这个现象的原因是什么呢？

是因为员额法官的表头有十列数据，但是书记员只4列，但是此刻body里面是有四个表格的节点存在的，所有导致页面渲染寻找节点错误，操控了其他隐藏的table节点

后来我换了v-if，又以为解决了问题，很是开心啊

但是又出现了这样一个问题

部门页签如果我在搜索框里面输入了123，点到第2页，此时切换到员额法官，再切换到部门页签，原来的搜索框里面的值被清空了，页数也被强制换到第1页

因为他们四个都是加在同一个组件tablecom(我自己封装的)，但是呢，每当我加载一次页签 此节点是要被销毁重新加载的，这个时候就会重新加载组件，渲染，有这个现象了

后来我是这样解决的

一次性加载玩四个接口，但是节点table每次都重新渲染，既解决了多个table错乱问题，也解决了sql查询慢的问题