美文网首页
页签切换多个表格table渲染错乱

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

作者: 有一个程序媛 | 来源:发表于2018-12-04 14:26 被阅读0次

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

相关文章

网友评论

      本文标题:页签切换多个表格table渲染错乱

      本文链接:https://www.haomeiwen.com/subject/nhpmcqtx.html