tabs元件的屬性

tabs的屬性

tabs的事件

tab-pane的屬性

標籤程式碼

<el-tabs v-model="activeName">
    <el-tab-pane name="0" label="標籤1"></el-tab-pane>
    <el-tab-pane name="1" label="標籤1"></el-tab-pane>
    <el-tab-pane name="2" label="標籤1"></el-tab-pane>
</el-tabs>

data初始化‘activeName’的值

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

用watch監聽‘activeName’的變化，從而響應不同的事件

watch : {
   'activeName':function(val) { //監聽切換狀態-計劃單
        let urlStr = '/index/test?tabid=' + val;
        this.$router.push(urlStr);
        // 註釋，根據val的不同，跳轉到不同
   },
}

在create獲取URL引數

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'){
            // 觸發‘配置管理'事件
            this.second();
        }else{
            // 觸發‘使用者管理'事件
            this.first();
        }
      },
      /**
       * 觸發‘使用者管理'事件
       */
      first(){
          console.log('我是使用者管理');
      },
      /**
       * 觸發‘配置管理'事件
       */
      second(){
          console.log('我是配置管理');
      }
    }
  };
</script>
 

原文連結：https://local.blog.csdn.net/article/details/80112138