解決element UI 自定義傳參的問(wèn)題
如下所示:
<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="請(qǐng)輸入內(nèi)容" @select="handleSelect" ></el-autocomplete>
這里的 hanleSelect 默認(rèn)綁定的參數(shù)是選中的那條數(shù)據(jù)。
但是如果一個(gè)頁(yè)面有好幾個(gè)相同的組件,要想知道選中的是第幾個(gè)。
@select="handleSelect(item, index)" // 這樣肯定不行的
解決方法:
<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="請(qǐng)輸入內(nèi)容" @select="((item)=>{handleSelect(item, index)})" // 寫個(gè)閉包就可以了,index表示第幾個(gè)組件 ></el-autocomplete>
基于element-UI 事件添加額外自定義參數(shù)的方法
要想在element的 event事件中增加自定義參數(shù),如果你直接在方法中寫,他就會(huì)將原來(lái)的參數(shù)覆蓋!
例如:
<input :value="scope.row.confirmAmount" @change="updateConfirmAmount(scope.row)" placeholder="請(qǐng)輸入審核數(shù)量" />
但是你可以在自定義參數(shù)之前加入 $event 這個(gè)變量,然后再傳其他值,這樣的話event事件的回調(diào)參數(shù)就會(huì)有了。
例如:
<input :value="scope.row.confirmAmount" @change="updateConfirmAmount($event, scope.row)" placeholder="請(qǐng)輸入審核數(shù)量" />
下面是我今天解決問(wèn)題的案例:
<code class="language-html"><!-- 明細(xì)列表 --> <el-table :data="midSubmitDetailTableData" border stripe style="width: 100%"> <el-table-column prop="submitAmount" label="本次交工數(shù)量"></el-table-column> <el-table-column prop="confirmAmount" label="審核數(shù)量"> <template slot-scope="scope"> <input :value="scope.row.confirmAmount" @change="updateConfirmAmount($event, scope.row)" placeholder="請(qǐng)輸入審核數(shù)量" /> </template> </el-table-column> </el-table></code>
對(duì)應(yīng)的方法:
updateConfirmAmount(data, row){ var _value = data.currentTarget._value; var value = data.currentTarget.value; },
最后抱怨一句:csdn的編譯器越來(lái)越不好用了!
以上這篇解決element UI 自定義傳參的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue+Echarts實(shí)現(xiàn)基本K線圖的繪制
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)基本K線圖的繪制,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03vue-devtools 打開源碼位置實(shí)現(xiàn)過(guò)程
這篇文章主要為大家介紹了vue-devtools 打開源碼位置實(shí)現(xiàn)過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09element?ui?日期選擇器el-date-picker如何修改指定日期背景(點(diǎn)擊指定背景色日期變深色)
這篇文章主要介紹了element?ui?日期選擇器el-date-picker?修改指定日期背景,點(diǎn)擊指定背景色日期變深色,本文通過(guò)實(shí)例效果展示給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07vue3開啟攝像頭并進(jìn)行拍照的實(shí)現(xiàn)示例
本文主要介紹了vue3開啟攝像頭并進(jìn)行拍照的實(shí)現(xiàn)示例,主要是使用navigator.mediaDevices.getUserMedia這個(gè)API來(lái)實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01解決vue3項(xiàng)目中el-menu不兼容SSR問(wèn)題
這篇文章主要介紹了解決vue3項(xiàng)目中el-menu不兼容SSR問(wèn)題,需要的朋友可以參考下2023-12-12ElementUI時(shí)間選擇器限制選擇范圍disabledData的使用
本文主要介紹了ElementUI時(shí)間選擇器限制選擇范圍disabledData的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06VUE實(shí)現(xiàn)Studio管理后臺(tái)之鼠標(biāo)拖放改變窗口大小
這篇文章主要介紹了VUE實(shí)現(xiàn)Studio管理后臺(tái)之鼠標(biāo)拖放改變窗口大小 的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的工作或?qū)W習(xí)具有一定的參考價(jià)值,需要的朋友可以參考下2020-03-03vue設(shè)置頁(yè)面背景及背景圖片簡(jiǎn)單示例
這篇文章主要給大家介紹了關(guān)于vue設(shè)置頁(yè)面背景及背景圖片的相關(guān)資料,在Vue項(xiàng)目開發(fā)中我們經(jīng)常要向頁(yè)面中添加背景圖片,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed
這篇文章主要介紹了?Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,感興趣的小伙伴可以參考一下2022-06-06