zoukankan      html  css  js  c++  java
  • 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
     
     
     
  • 相关阅读:
    DB2创建序列
    hibernate注解影射表
    自定义异常类一
    【JVM】java方法区
    【JVM】java棧
    (2)java堆内存
    (1)java虚拟机概念和结构图
    枚举应用五
    设计模式之命令模式学习理解
    eclipse中javadoc给项目生成api文档
  • 原文地址:https://www.cnblogs.com/panchanggui/p/15015995.html
Copyright © 2011-2022 走看看