vue中el-tab如何點(diǎn)擊不同標(biāo)簽觸發(fā)不同函數(shù)的實(shí)現(xiàn)
更新時(shí)間：2024年03月28日 09:14:15 作者：聰明小蘿卜
el-tab本身的功能是點(diǎn)擊之后切換不同頁(yè),本文主要介紹了vue中el-tab如何點(diǎn)擊不同標(biāo)簽觸發(fā)不同函數(shù)的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
介紹
el-tab本身的功能是點(diǎn)擊之后切換不同頁(yè)，但是我希望點(diǎn)擊不同標(biāo)簽就觸發(fā)不同頁(yè)
代碼實(shí)現(xiàn)
<template>
<el-tabs
v-model="activeName"
type="card"
class="demo-tabs"
@tab-click="handleClick"
>
<el-tab-pane label="User" name="User">User</el-tab-pane>
<el-tab-pane label="Config" name="Config">Config</el-tab-pane>
</el-tabs>
</template>
<script>
export default{
data() {
return {
clickedTabs: {//這里是希望函數(shù)只被調(diào)用一次
'User': false,
'Config': false,
},
}
},
methods: {
function1(){console.log('function1 was called')},
function2(){console.log('function2 was called')},
handleClick(tab, event) {
if (!this.clickedTabs[tab.props.name]) {//這里是希望函數(shù)只被調(diào)用一次
console.log('Clicked tab name: ' + tab.props.label);
this.clickedTabs[tab.props.name] = true;//這里是希望函數(shù)只被調(diào)用一次
// 根據(jù)tab的名字執(zhí)行相應(yīng)的操作
switch (tab.props.name) {
case "User":
console.log('function1 BEGIN');
this.function1();
break;
case "Config":
console.log('function2 BEGIN');
this.function2();
break;
}
}
else {
console.log(tab.props.name + ' tab was already clicked.');
}
},
}
}
</script>handleClick里面通過(guò)if來(lái)使得點(diǎn)擊標(biāo)簽調(diào)用函數(shù)只被調(diào)用一次，如果不需要這個(gè)操作可以把相關(guān)代碼注釋掉，只留下switch函數(shù)。
到此這篇關(guān)于vue中el-tab如何點(diǎn)擊不同標(biāo)簽觸發(fā)不同函數(shù)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue el-tab點(diǎn)擊標(biāo)簽觸發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3 KeepAlive緩存組件實(shí)現(xiàn)方式
文章主要介紹了Vue中內(nèi)置組件的使用,其中著重講解了KeepAlive的使用方式和細(xì)節(jié),KeepAlive用于在多個(gè)組件間動(dòng)態(tài)切換時(shí)緩存被移除的組件實(shí)例,可以使用include/exclude和max屬性來(lái)定制緩存行為,同時(shí),還介紹了onActivated和onDeactivated生命周期鉤子的使用方法2026-04-04
vue.js如何在網(wǎng)頁(yè)中實(shí)現(xiàn)一個(gè)金屬拋光質(zhì)感的按鈕
這篇文章主要給大家介紹了關(guān)于vue.js如何在網(wǎng)頁(yè)中實(shí)現(xiàn)一個(gè)金屬拋光質(zhì)感的按鈕的相關(guān)資料,文中給出了詳細(xì)的實(shí)例代碼以及圖文將實(shí)現(xiàn)的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue使用axios添加請(qǐng)求頭方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue 防止頁(yè)面加載時(shí)看到花括號(hào)的解決操作
這篇文章主要介紹了vue 防止頁(yè)面加載時(shí)看到花括號(hào)的解決操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
詳解VUE中的插值( Interpolation)語(yǔ)法
這篇文章主要介紹了詳解VUE中的插值( Interpolation)語(yǔ)法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
Vue項(xiàng)目如何關(guān)閉語(yǔ)法檢查
這篇文章主要介紹了Vue項(xiàng)目如何關(guān)閉語(yǔ)法檢查問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue組件實(shí)現(xiàn)卡片動(dòng)畫倒計(jì)時(shí)示例詳解
這篇文章主要介紹了Vue組件實(shí)現(xiàn)卡片動(dòng)畫倒計(jì)時(shí)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
preload對(duì)比prefetch的功能區(qū)別詳解
這篇文章主要為大家介紹了preload對(duì)比prefetch的使用區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
vue中watch監(jiān)聽對(duì)象中某個(gè)屬性的方法
watch 的用法有個(gè)特點(diǎn)，就是當(dāng)值第一次綁定的時(shí)候，不會(huì)執(zhí)行監(jiān)聽函數(shù)，只有值發(fā)生改變才會(huì)執(zhí)行，如果我們需要在最初綁定值得時(shí)候也執(zhí)行函數(shù)，就需要用到 immediate 屬性，這篇文章主要介紹了vue中watch監(jiān)聽對(duì)象中某個(gè)屬性的方法,需要的朋友可以參考下2023-04-04
最近在學(xué)習(xí)Three.js相關(guān)的技術(shù),恰逢Vue 3.0正式版也已推出,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目中使用three.js的操作步驟,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01