页签切换多个表格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查询慢的问题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,806评论 1 92
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,009评论 3 119
  • 原谅我上周太懒,所以连总结都没有写,3月5号,北京,晴,有风,距离我入职到今天,不多不少,正好三个月了,当然中间过...
    464123e1a2e9阅读 179评论 0 0
  • 因为跟姐姐沟通,我一时着急,跑去跟爸爸沟通座位的事情。他正在忙着早上要缴交的材料。 他说,我现在没空。 我把自认为...
    躲进小楼看灯火阅读 604评论 0 0
  • 亲爱的女儿转眼间你从一个小娃娃长成了一个大姑娘,你聪明懂事,一直一来从来不用妈妈为你操心,从上小学就开始住...
    荷荷妈阅读 207评论 0 0