Vue對Element中el-tab-pane添加@click事件無效問題解決
更新時間：2023年07月22日 11:29:52 作者：無·糖
這篇文章主要給大家介紹了關(guān)于Vue對Element中el-tab-pane添加@click事件無效問題的解決辦法,文中通過圖文以及代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
Vue對Element中的el-tab-pane添加@click事件無效
發(fā)現(xiàn)問題
使用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事件無效。
查看官方文檔發(fā)現(xiàn)，官方文檔只提供了關(guān)于tab的點擊事件，而tab-pane沒有點擊事情。
解決方法
在el-tab-pane中加入插槽，tab的名稱為插槽的內(nèi)容，此時點擊每個tab的時候就能拿到對應(yīng)的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 }} //顯示的內(nèi)容為每個tab-pane對應(yīng)的文字
</div>
</el-tab-pane>
</el-tabs>總結(jié)
到此這篇關(guān)于Vue對Element中el-tab-pane添加@click事件無效問題解決的文章就介紹到這了,更多相關(guān)el-tab-pane添加@click事件無效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了VUE程序調(diào)試的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
解決betterScroll在vue中存在圖片時,出現(xiàn)拉不動的問題
今天小編就為大家分享一篇解決betterScroll在vue中存在圖片時,出現(xiàn)拉不動的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本文主要介紹了element中form組件prop嵌套屬性的問題解決，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
關(guān)于vue-property-decorator的基礎(chǔ)使用實踐
這篇文章主要介紹了關(guān)于vue-property-decorator的基礎(chǔ)使用實踐，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了如何流vue+canvas實現(xiàn)一個簡易的九宮格手勢解鎖器,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-09-09
Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼
本文主要介紹了Vue+SpringBoot實現(xiàn)支付寶沙箱支付的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類
這篇文章主要介紹了element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue vuex vue-rouert后臺項目——權(quán)限路由（適合初學(xué)）
這篇文章主要介紹了vue vuex vue-rouert后臺項目——權(quán)限路由，通過本文可以很清除的捋清楚vue+vuex+vue-router的關(guān)系，本版本非常簡單，適合初學(xué)者,需要的朋友可以參考下2017-12-12
uniapp 拖拽圖片排序功能實現(xiàn) 類似于微信朋友圈效果
這篇文章主要介紹了uniapp 拖拽圖片排序功能實現(xiàn)類似于微信朋友圈,一部分是拖拽的放大做小,xy位置判定,圖片數(shù)組的插入排序,另一部分是上傳加號圖片的?定位? 動態(tài)計算分為幾列,每一個圖片大小的位置?絕對定位的計算,需要的朋友可以參考下2024-07-07
仿ElementUI實現(xiàn)一個Form表單的實現(xiàn)代碼
這篇文章主要介紹了仿ElementUI實現(xiàn)一個Form表單的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04