Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >element--ui使用tab切换时获取当前对象的id

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

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

下面展示一些 内联代码片

··· tab.vue

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <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
代码运行次数:0
运行
AI代码解释
复制
<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 删除。

评论
登录后参与评论
1 条评论
热度
最新
1
1
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
vue学习:使用tab标签页时,刷新页面停留在当前tab
可以看到 <el-tabs> 标签中 v-model="activeName",它和选项卡中的 name属性进行绑定;
冰霜
2022/04/18
3.9K0
vue学习:使用tab标签页时,刷新页面停留在当前tab
Vue页面中引用自定义组件
比如我想引用一个外部的头部导航的组件,因为这个导航在很多地方都用到,避免每个页面都写一遍 首先 我先在components这里创建一个navmenu的组件
明知山
2020/09/03
1.5K0
Element Tabs 标签页实现右键自定义菜单
如果tab标签页比较多的话,一个个关闭比较麻烦,可以右键显示菜单,关闭所有的标签页或者特定的标签页
tianyawhl
2020/04/13
4.2K0
element-ui 标签页(循环遍历)
---- <div class="box3"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane :label="textShow + '默认'" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> <el-tab-pane la
用户4344670
2019/08/28
5.6K0
element-ui 标签页(循环遍历)
vue 点击菜单动态生成Tab
UI 组件采用element  NavMenu点击左侧的菜单列表生成Tab,如下图
tianyawhl
2020/02/20
4.5K2
Element Tabs 标签页 展示Echart 并随窗口变化自适应
1、如何在一个div中展示不同的图表  (点击tab时为Chart组件赋值,并传给子组件,子组件监听数据变化并在 $nextTick 中重新绘制表格)
tianyawhl
2020/03/09
2.2K0
Element Tabs 标签页 展示Echart 并随窗口变化自适应
用Spring Boot+Vue做微人事项目第十天
用Spring Boot+Vue做微人事项目第十天
Java架构师必看
2021/05/14
5280
用Spring Boot+Vue做微人事项目第十天
前端成神之路-vue前端项目05
1.完成参数管理 2.推送代码到码云 3.制作商品列表页面 4.制作商品添加页面
海仔
2021/05/06
1.6K0
elementUI中el-tabs或者说Vue现存的一个bug排查
在 el-dialog 中使用 el-tabs ,并且 el-dialog 添加 destroy-on-close 属性,当关闭弹窗的时候页面就直接无响应了。
windliang
2022/09/23
1.4K0
elementUI中el-tabs或者说Vue现存的一个bug排查
动态加载用户菜单
流程是用户登录后进入模块页面,点击不同的模块,进入菜单页面(模块不同,菜单内容也不同)
tianyawhl
2020/02/18
2.4K0
动态加载用户菜单
用例新增、编辑页面
流年Felix
2023/08/28
4350
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》069-商业项目:电商后台管理系统实战(订单管理模块的开发)
在电商行业中,订单管理模块是后台管理系统的核心组成部分之一。它直接关系到商家的运营效率和客户的购物体验。一个高效的订单管理模块不仅能够帮助商家实时追踪订单状态,减少处理时间,还能提升客户满意度,实现更好的业务增长。
愚公搬代码
2025/06/03
1720
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》069-商业项目:电商后台管理系统实战(订单管理模块的开发)
十分钟,让你学会Vue的这些巧妙冷技巧
写了两年的Vue,期间学习到好几个提高开发效率和性能的技巧,现在把这些技巧用文章的形式总结下来。
CRMEB商城源码
2022/07/28
7800
页面中元素的锚点定位
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第12天,点击查看活动详情 >>
默默的成长
2022/11/02
2.4K0
流程表单的导入导出替换方案--源代码模式
最近要做流程表单的导入导出功能,但总觉得这个功能有点多余。 这个功能只是为了方便迁移配置到环境,为什么需要搞这么复杂呢。 后面想想,觉得没必要这么做,我只作一个源代码示例的功能即可。 意思是说,有一个页面有两个Tab,一个是设计模式,一个是源代码模式。 效果如下:
星痕
2019/10/14
6050
流程表单的导入导出替换方案--源代码模式
【Vue3+TypeScript】CRM系统项目搭建之 — 登录注册页【Tabs 选项卡的搭建以及 Tab 选项组件的插槽的使用】
HelloWorldZ
2024/03/20
3120
【Vue3+TypeScript】CRM系统项目搭建之 — 登录注册页【Tabs 选项卡的搭建以及 Tab 选项组件的插槽的使用】
Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现
Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现 By:授客 开发环境 win10 element-ui "2.13.1" vue "2.6.10" 需求描述 如下,鼠标移动到左侧标签
授客
2020/06/23
4K0
10.寻光集后台管理系统-用户管理(登录页面)
把img/logo.png这个图片换一下就可以了,具体路径在frontend/public/img/logo.png
zx钟
2022/12/02
1.2K0
10.寻光集后台管理系统-用户管理(登录页面)
微服务架构 CI/CD 实战
在项目根路径下执行,Maven 命令 mvn clean install -pl com.lab:book-common -am -Ptest,截取输出如下
JAVA日知录
2020/06/04
6530
微服务架构 CI/CD 实战
前端成神之路-vue前端项目04
新建分支goods_cate并推送到码云 git checkout -b goods_cate git push -u origin goods_cate
海仔
2021/05/06
1.8K0
推荐阅读
相关推荐
vue学习:使用tab标签页时,刷新页面停留在当前tab
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验