一个页面中有四个切换,每个切换下面是有一个表格的,此刻的你是要用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查询慢的问题
网友评论