ElementUI中el-tabs事件綁定的具體使用

更新時間：2022年04月15日 10:09:29 作者：雪梅零落

本文主要介紹了ElementUI中el-tabs事件綁定的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

tabs組件的屬性

tabs的屬性

tabs的事件

tab-pane的屬性

標(biāo)簽代碼

<el-tabs v-model="activeName">
    <el-tab-pane name="0" label="標(biāo)簽1"></el-tab-pane>
    <el-tab-pane name="1" label="標(biāo)簽1"></el-tab-pane>
    <el-tab-pane name="2" label="標(biāo)簽1"></el-tab-pane>
</el-tabs>

data初始化‘activeName’的值

data() {
   return {
      activeName: '0',
   }
}

用watch監(jiān)聽‘activeName’的變化，從而響應(yīng)不同的事件

watch : {
   'activeName':function(val) { //監(jiān)聽切換狀態(tài)-計劃單
        let urlStr = '/index/test?tabid=' + val;
        this.$router.push(urlStr);
        // 注釋，根據(jù)val的不同，跳轉(zhuǎn)到不同
   },
}

在create獲取URL參數(shù)

created() {
?? ??? ??? ?
?? ?if(this.$route.query.tabid) {
?? ??? ?this.activeName = this.$route.query.tabid;
? ? }else{
?? ? ? ?this.activeName = 0;
? ? }

},

補充：可直接運用tab-click綁定事件

<template>
? <el-tabs v-model="activeName" @tab-click="handleClick">
? ? <el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane>
? ? <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
? </el-tabs>
</template>
<script>
? export default {
? ? data() {
? ? ? return {
? ? ? ? activeName: 'second'
? ? ? };
? ? },
? ? methods: {
? ? ? handleClick(tab, event) {
? ? ? ? console.log(tab, event);
? ? ? ? if(tab.name == 'second'){
? ? ? ? ?? ?// 觸發(fā)‘配置管理'事件
? ? ? ? ?? ?this.second();
? ? ? ? }else{
? ? ? ? ?? ?// 觸發(fā)‘用戶管理'事件
? ? ? ? ?? ?this.first();
? ? ? ? }
? ? ? },
? ? ? /**
? ? ? ?* 觸發(fā)‘用戶管理'事件
? ? ? ?*/
? ? ? first(){
? ? ? ?? ?console.log('我是用戶管理');
? ? ? },
? ? ? /**
? ? ? ?* 觸發(fā)‘配置管理'事件
? ? ? ?*/
? ? ? second(){
? ? ? ?? ?console.log('我是配置管理');
? ? ? }
? ? }
? };
</script>

到此這篇關(guān)于ElementUI中el-tabs事件綁定的具體使用的文章就介紹到這了,更多相關(guān)ElementUI el-tabs事件綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: