解決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文件
這篇文章主要介紹了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前端框架核心及源碼解析
這篇文章主要為大家介紹了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ù)的用法和原理
在 Vue3 中,setup 函數(shù)是一個(gè)新引入的概念,它代替了之前版本中的 data、computed、methods 等選項(xiàng),用于設(shè)置組件的初始狀態(tài)和邏輯,本文將主要介紹Setup的基本用法和少量原理
2024-02-02
vue el-radio單選傳值和默認(rèn)選中方式
文章介紹了一個(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