vue中使用iview-UI实现切换Tab页网络请求优化

问题描述

项目前台有个tab标签页切换，三个TabPane标签，分别挂载三个不同的组件，三个组件中都有网络请求，且第三组件中数据量大无分页，需要进行前端显示优化——Tab页怎样进入页面时只请求默认显示项的数据？

HTML代码大致如下，pending-table、warning-select、threshold-table分别是TabPane标签中的三个组件：

<Tabs>
    <TabPane label="等待处理" name="0">
        <pending-table></pending-table>
    </TabPane>
    <TabPane label="预警查询" name="1">
        <warning-select></warning-select>
    </TabPane>
    <TabPane label="预警阀值" name="2">
        <threshold-table></threshold-table>
    </TabPane>
</Tabs>

说一下需求：

• 页面加载时，默认显示的Tab页是“等待处理”，pending-table中显示网络请求回来的数据，页面渲染需要流畅；
• “预警查询”和“预警阀值”页面中的数据，需要在鼠标点击切换到对应的Tab页时再做请求，不点击不请求。

解决方法

解决思路：

首先的想法是点击对应标签页时传值给组件：

仔细查看关于Tabs的官方文档的API，API中提供了一个Tabs标签的on-click事件

当点击TabPane时被触发，但是@on-click是写在<Tabs>标签中