vue 菜鸟教学＜el-tab-pane＞ 无法加点击事件

于 2024-03-08 10:46:14 发布
阅读量505 收藏 8
点赞数 6
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34417247/article/details/136555712
版权

<el-tab-pane>
              <div slot="label" @click="GetDetail()">操作记录</div>

              </el-tab-pane>

方法

    GetDetail(){
    getecord({Id:this.resumeid}).then((res)=>{
    if(res.success){
      this.TOpLogs=res.data;
    }})
    },

沪上百卉
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
解决vue中el-tab-pane切换的问题
10-15
主要介绍了解决vue中el-tab-pane切换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Vue对Element中的el-tab-pane添加@click事件无效
06-06
解决Vue对Element中的el-tab-pane添加@click事件无效
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
主要介绍了在vue中使用el-tab-pane v-show/v-if无效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE+Element-ui实战之el-tabs切换实时加载el-table表格数据
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
09-21 1万+
实战场景描述 实际开发过程中，需要Tab切换不同类型的数据，如果是每个Tab表单是静态数据还好，但通常情况下基本上涉及的都是table数据，页面打开时，我们看到的是一个打开的Tab内容，但其实vue是把所有的内容都渲染了，只是其他都隐藏了，这种可能就会造成打开页面时因为需要同时加载多个数据而卡顿，最佳实现思路肯定是Tab切换时才进行实时加载。 1、确定好每个Tab内容 参考官网的例子改成我们的内容就好 2、Tab切换事件 今天的列子每个tab都涉及表格，为了方便后期维护和切换刷新，把每个T
vue element-ui里面el-tabs 动态设置label属性
weixin_46463643的博客
11-03 6990
<template> <div class="login"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane :label="'用户管理（'+name+')'" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管.
el-tab-pane点击事件
CRT本人的博客
04-11 1万+
<el-tab-pane标题的点击事件
el-tab-pane 添加点击事件不起作用
xiaoyue_ly的博客
10-10 1077
el-tab-pane添加点击事件不起作用
Vue对Element中的el-tab-pane添加@click事件无效
...
04-16 3838
Vue对Element中的el-tab-pane添加@click事件无效
element-plus组件库el-tab-pane中加入el-dropdown组件、设置el-dropdown-item选项高亮
个人博客
12-20 2166
使用插槽的方式，在el-tab-pane中加入el-dropdown组件。根据command值设置el-dropdown-item高亮。
＜el-tabs＞tab切换的使用
笑到世界都狼狈的博客
07-26 1万+
最近在写vue的项目，项目中有遇到element-ui。所以vue和element-ui都是新手菜鸟级选手，下面将<el-tabs></el-tabs>的使用方法总结如下： 如图所示，切换tab时，页面效果： 代码如下： <template> <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tab-pane labe...
el-tabs选项卡点击事件（Element UI）
热门推荐
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
12-11 1万+
<template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> </el-tabs> </te
修改el-tab标签页的label默认样式（插槽）
夏日漱石的博客
10-08 1833
修改el-tab标签页的label默认样式（插槽）
Vue3 - Element Plus 组件库 Tabs 标签页右侧区域插入按钮，＜el-tabs＞ / ＜el-tab-pane＞ 选项卡组件右侧自定义插槽内容教程（右边区域添加自定义按钮功能区）
最新发布
王佳斌
11-24 2857
vue3，element plus，tabs选项卡如何在插槽按钮，tabs标签页组件怎么自定义右侧内容，vue3 element plus tabs组件右侧插槽按钮，element-plus在el-tabs组件的最右侧添加按钮，如何在选项卡右边加入按钮搜索框等内容，哪个属性能在tab选项卡右侧插入自定义按钮，在el-tabs组件 最右侧添加按钮，vue3 el-tabs组件怎么自定义右侧插槽内容，Tabs标签页右侧自定义插槽，Element Plus Tab右边加按钮，el-tabs组件自定义右侧按钮，在E
el-tabs内容标签el-tab-pane多行显示
爆炸哈斯卡的博客
06-13 4908
想通过el-tabs实现标签页内容多行显示，垂直分布，通过在el-tab-pane中插值三个div，让div垂直显示，然后在修改一下style就可以了
vue 使用插槽 slot 的使用 （直接案例讲解）
L_H_H博客
09-24 3894
一. 表格里 嵌套 el-tooltip ，弹窗显示 html 内容 <el-table> <el-table-column prop="answer" label="答案" align="center"> <template slot-scope="scope"> <el-tooltip effect="light" pl...
vue3使用Element-plus Tabs 标签页的点击事件
前端之行，任重道远！
08-21 1万+
<template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> <el-tab-pane label=
关于el-tab自定义跳转的问题总结
JJRH0618的博客
04-22 793
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-for="(item, index) in firstTab" :key="index" :label="item.name" :name="item.name" :closable='item.closable'> <component.
完善修改下面这段代码使其循环按钮并且根据按钮显示隐藏对应内容<el-tab-pane label="2021年" > <template > <el-button @click="aa(index)" v-for="(item, index) in data" :key="index">{{item.name}}</el-button> <div> <el-collapse-transition > <div v-show="show3[index]" > </div> </el-collapse-transition> </div> </template> </el-tab-pane>
07-12
你可以尝试使用一个数组来记录每个按钮对应的显示状态。根据按钮的索引，通过修改数组中的元素来控制对应内容的显示与隐藏。以下是修改后的代码： ```html <el-tab-pane label="2021年"> <template> <el-button @click="toggleContent(index)" v-for="(item, index) in data" :key="index"> {{item.name}} </el-button> <div> <el-collapse-transition v-for="(item, index) in data" :key="index"> <div v-show="showContent[index]"> <!-- 对应内容 --> </div> </el-collapse-transition> </div> </template> </el-tab-pane> ``` 在你的 Vue 组件中，你需要在 `data` 函数中添加一个 `showContent` 数组，并初始化为 `false`，长度与 `data` 数组相同。然后在 `toggleContent` 方法中，根据点击的按钮索引来切换对应内容的显示与隐藏。下面是示例代码： ```javascript data() { return { showContent: Array(this.data.length).fill(false) }; }, methods: { toggleContent(index) { this.$set(this.showContent, index, !this.showContent[index]); } } ``` 这样，每次点击按钮时，对应的内容就会显示或隐藏。记得将 `<-- 对应内容 -->` 替换为实际需要显示的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沪上百卉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值