Vue对Element中el-tab-pane添加@click事件无效问题解决
更新时间：2023年07月22日 11:29:52 作者：无·糖
这篇文章主要给大家介绍了关于Vue对Element中el-tab-pane添加@click事件无效问题的解决办法,文中通过图文以及代码示例介绍的非常详细,需要的朋友可以参考下
Vue对Element中的el-tab-pane添加@click事件无效
发现问题
使用element-UI中的el-tabs的时候
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane
v-for="item in productList"
:key="item.categoryId"
:label="item.categories"
:name="item.categories"
@click="tabClick(item.categoryId)"
>
</el-tab-pane>
</el-tabs>想给每一个tab绑定事件，并传递id值，但是这样子绑定点击tab时click事件无效。
查看官方文档发现，官方文档只提供了关于tab的点击事件，而tab-pane没有点击事情。
解决方法
在el-tab-pane中加入插槽，tab的名称为插槽的内容，此时点击每个tab的时候就能拿到对应的id值了
<el-tabs v-model="activeName" >
<el-tab-pane
v-for="item in productList"
:key="item.categoryId"
:label="item.categories"
:name="item.categories"
>
<div slot="label" @click="tabClick(item.categoryId)">
{{ item.categories }} //显示的内容为每个tab-pane对应的文字
</div>
</el-tab-pane>
</el-tabs>总结
到此这篇关于Vue对Element中el-tab-pane添加@click事件无效问题解决的文章就介绍到这了,更多相关el-tab-pane添加@click事件无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue组件之间数据传递的方法,结合实例形式分析了vue.js父组件与子组件之间数据传递相关操作技巧,需要的朋友可以参考下2019-02-02
今天小编就为大家分享一篇vue 自定义指令自动获取文本框焦点的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
今天小编就为大家分享一篇vue2.x 通过后端接口代理,获取qq音乐api的数据示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
Pinia是Vue的存储库,它允许您跨组件/页面共享状态,这篇文章主要给大家介绍了关于vue调试工具没有Pinia模块的简单解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下2024-02-02
Vue对Element中el-tab-pane添加@click事件无效问题解决
这篇文章主要给大家介绍了关于Vue对Element中el-tab-pane添加@click事件无效问题的解决办法,文中通过图文以及代码示例介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue前端如何向后端传递参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue标签属性动态传参并拼接字符串的操作方法,我们需要根据传入值的类型,在placeholder属性赋值"请输入长度",“请输入宽度”,"请输入厚度"等提示字符,本文通过实例代码介绍的非常详细,需要的朋友参考下吧2023-11-11
这篇文章主要为大家详细介绍了Vue数字输入框组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了Element PageHeader页头的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要为大家介绍了vue使用websocket概念及示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论