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>

 

··· 这样就完成啦~

参考原文：https://www.cnblogs.com/skybluetwo/p/8359137.html