tab页切换只渲染一页的数据

女爷i 2023-02-19 05:23 11阅读 0赞

第一页：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]  
第二页：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70 1]  
**现象**：每页数据都能拿到，只渲染一页，并且另一页的表格显示height：0；max-height:0; 修改这两个参数之后表格显示。

tab页切换用的element-ui

**原因**：

1.  **切换之后数据没有渲染**
2.  因为tab切换是通过**display：none**的形式，其他页的表格可能就因为这个原因**没有高度**了

**解决办法**：1.首先需要设置切换之后渲染，对tab的点击切换事件加入渲染

handleClick(tab, event) { 
           this.$refs["table"+ tab.name].getShowData();
        }

2.这时表格还没有出来可能是因为高度  
可以尝试 给出不来的表格 一个div标签包裹，给他一个高度

3.最后的还没有出来就找找表格更远的父级是否设置了高度。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020061910304887.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200619103116211.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg==,size_16,color_FFFFFF,t_70