解決element UI 自定義傳參的問(wèn)題
更新時(shí)間：2018年08月22日 11:51:47 作者：userkang
今天小編就為大家分享一篇解決element UI 自定義傳參的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
如下所示：
<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項(xiàng)目中v-model父子組件通信的實(shí)現(xiàn)詳解
vue.js，是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的庫(kù)。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中v-model父子組件通信實(shí)現(xiàn)的相關(guān)資料，需要的朋友可以參考下。2017-12-12
這篇文章主要介紹了vue/cli3版本打包如何去掉soucemap文件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue3中reactive和ref的實(shí)現(xiàn)與區(qū)別詳解
reactive和ref都是vue3實(shí)現(xiàn)響應(yīng)式系統(tǒng)的api,他們是如何實(shí)現(xiàn)響應(yīng)式的呢,reactive和ref又有什么區(qū)別呢,下面小編就來(lái)和大家詳細(xì)講講,希望對(duì)大家有所幫助2023-10-10
Vue 動(dòng)態(tài)添加路由及生成菜單的方法示例
這篇文章主要介紹了Vue 動(dòng)態(tài)添加路由及生成菜單的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家介紹了Backbone前端框架核心及源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
element?el-upload文件上傳覆蓋第一個(gè)文件的實(shí)現(xiàn)
這篇文章主要介紹了element?el-upload文件上傳覆蓋第一個(gè)文件的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue-video-player實(shí)現(xiàn)實(shí)時(shí)視頻播放方式(監(jiān)控設(shè)備-rtmp流)
這篇文章主要介紹了vue-video-player實(shí)現(xiàn)實(shí)時(shí)視頻播放方式(監(jiān)控設(shè)備-rtmp流)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
解決vue項(xiàng)目報(bào)錯(cuò)webpackJsonp is not defined問(wèn)題
下面小編就為大家分享一篇解決vue項(xiàng)目報(bào)錯(cuò)webpackJsonp is not defined問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
在 Vue3 中,setup 函數(shù)是一個(gè)新引入的概念,它代替了之前版本中的 data、computed、methods 等選項(xiàng),用于設(shè)置組件的初始狀態(tài)和邏輯,本文將主要介紹Setup的基本用法和少量原理2024-02-02
文章介紹了一個(gè)父組件和子組件的交互過(guò)程,父組件通過(guò)點(diǎn)擊“關(guān)聯(lián)公司”輸入框彈出子組件dialog,子組件中使用SelectCompany.vue實(shí)現(xiàn)默認(rèn)選中功能,作者分享了個(gè)人經(jīng)驗(yàn),希望能對(duì)大家有所幫助2025-01-01