vue使用element-ui tabs切换 实现按需加载

vue使用element-ui 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="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>