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>
