前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >element--ui使用tab切换时获取当前对象的id

element--ui使用tab切换时获取当前对象的id

作者头像
用户7741497
发布2022-03-20 11:19:36
5.2K1
发布2022-03-20 11:19:36
举报
文章被收录于专栏:hml_知识记录
1.问题
代码语言:javascript
复制
	有些特定的时候,使用Tab切换时需要获取当前选中栏的ID来进行操作
1
2. 解决思路
代码语言:javascript
复制
	通过定义一个函数进行函数绑定,函数会传递过去当前对象,通过当前对象获取对象属性
1
3.解决方法

下面展示一些 内联代码片

··· tab.vue

代码语言:javascript
复制
 <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>
123456

··· tab.js ↓

代码语言:javascript
复制
<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>

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.问题
  • 2. 解决思路
  • 3.解决方法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档