簡述
標(biāo)簽頁請求，切換進(jìn)去會請求該頁的數(shù)據(jù)
如果頁面一加載就請求出所有的數(shù)據(jù)，會造成數(shù)據(jù)堵塞，對性能有很大的影響
所以要在tabs標(biāo)簽頁點(diǎn)擊切換 的時候發(fā)起相應(yīng)的網(wǎng)絡(luò)請求，用到的是tab-click事件。
示例圖
需求
1.渲染出頁面時默認(rèn)顯示第一頁
2.切換tab時，加載此頁數(shù)據(jù)
示例
<template>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定時任務(wù)補(bǔ)償" name="fourth">定時任務(wù)補(bǔ)償</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'first' //默認(rèn)顯示第一頁
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
說明
tab-click標(biāo)簽事件：tab 被選中時觸發(fā)，他的返回值是被選中的標(biāo)簽 tab 實(shí)例
tab 和 event兩個參數(shù)打印一下顯示如下：
tab,event打印出來顯示結(jié)果
tab 的參數(shù)里有個 index 值，可以作為標(biāo)簽頁切換的索引
tab 的參數(shù)里有個label，也可以作為切換標(biāo)簽的判斷條件
也可以使用activeName。
索引
實(shí)例
通過上述明確事件，參數(shù)后，修改如下進(jìn)行實(shí)例操作
// tabs標(biāo)簽頁切換事件
handleClick(tab, event) {
console.log(tab, event);
if (tab.index == 0) {
//網(wǎng)絡(luò)請求1
} else if (tab.index == 1) {
//網(wǎng)絡(luò)請求2
} else {
//網(wǎng)絡(luò)請求3
}
}
