一、问题简介

在项目中使用Element的Tabs标签页的时候，所有接口都会同时请求，这样的话，会产生如下几个问题。

1.当前页面加载速度会被严重拖慢，优化后，需要第一时间加载的数据量可以大大减少

2.网络拥堵的时候，会严重掉包

3.其他tabs页的数据更新会不及时

二、解决方案

<template>
  <el-card class="box-card white-main" id="user">
    <div slot="header" class="clearfix">
      <span>发送记录</span>
    </div>
    <div class="item">
      <el-tabs v-model="activeName" type="card" @tab-click="loadTab">
        <el-tab-pane label="今日发送" name="today">
          <Search style="margin-bottom:10px;" excelName="用户短信-今日发送" :showTime="false" />
          <Table v-if="load.today" />
        </el-tab-pane>
	<el-tab-pane label="昨日发送" name="yesterday">
	  <Search style="margin-bottom:10px;" excelName="用户短信-昨日发送" :showTime="false" />
	  <Table v-if="load.yesterday" />
	</el-tab-pane>
	<el-tab-pane label="前日发送" name="beforeYesterday">
	  <Search style="margin-bottom:10px;" excelName="用户短信-前日发送" :showTime="false" />
	  <Table v-if="load.beforeYesterday" />
	</el-tab-pane>
	<el-tab-pane label="更早发送" name="earlier">
	  <Search style="margin-bottom:10px;" excelName="用户短信-更早发送" :showTime="true" />
	  <Table v-if="load.earlier" />
	</el-tab-pane>
	<el-tab-pane label="状态" name="state">
	  <State style="margin-bottom:10px;" />
	  <Table v-if="load.state" />
	</el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>

<script>
	import Search from '../components/search'
	import Table from '../components/table'
	import State from '../components/state'
	export default {
		components: {
			Search,
			Table,
			State
		},
		data() {
			return {
				activeName: 'today',
				load: {
					today: true,
					yesterday: false,
					beforeYesterday: false,
					earlier: false,
					state: false
				}
			}
		},
		methods: {
			// 按需加载后端数据[tab]
			loadTab(tab, event) {
				if (this.load[tab.name] === false){
					this.load[tab.name] = true
				}
			}
		}
	}
</script>