天天看點

element--ui使用tab切換時擷取目前對象的id

1.問題

有些特定的時候,使用Tab切換時需要擷取目前選中欄的ID來進行操作      

2. 解決思路

通過定義一個函數進行函數綁定,函數會傳遞過去目前對象,通過目前對象擷取對象屬性      

3.解決方法

下面展示一些 ​

​内聯代碼片​

​。

··· tab.vue

<template>
     <el-tabs v-model="switch" @tab-click="tabClick">
        <el-tab-pane class="tab" label="Tab1" name="tabOne"></el-tab-pane>
        <el-tab-pane class="tab" label="Tab2" name="tabTwo"></el-tab-pane>
    </el-tabs>
</template>      

··· tab.js ↓

<script>
  export default {
    name: 'tab',
    data () {
      return {
        tabName: 'tabOne',
      }
    },
    methods: {
      tabClick(tab, event) {
          console.log(this.tabName)    //擷取目前元素屬性name
        console.log(event.target.getAttribute('id'))  //擷取到目前元素的id
        if(this.tabName == tabOne){
        // 所需代碼
      }else if(this.tabName == tabTwo){
          // 所需代碼 
      }
    }
  }
</script>      

··· 這樣就完成啦~·

·      

繼續閱讀