解決element UI 自定義傳參的問題
更新時間：2018年08月22日 11:51:47 作者：userkang
今天小編就為大家分享一篇解決element UI 自定義傳參的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="請輸入內(nèi)容" @select="handleSelect" ></el-autocomplete>
這里的 hanleSelect 默認綁定的參數(shù)是選中的那條數(shù)據(jù)。
但是如果一個頁面有好幾個相同的組件，要想知道選中的是第幾個。
@select="handleSelect(item, index)" // 這樣肯定不行的
解決方法：
<el-autocomplete
v-model="state4"
:fetch-suggestions="querySearchAsync"
placeholder="請輸入內(nèi)容"
@select="((item)=>{handleSelect(item, index)})" // 寫個閉包就可以了，index表示第幾個組件
></el-autocomplete>
基于element-UI 事件添加額外自定義參數(shù)的方法
要想在element的 event事件中增加自定義參數(shù)，如果你直接在方法中寫，他就會將原來的參數(shù)覆蓋！
例如：
<input :value="scope.row.confirmAmount" @change="updateConfirmAmount(scope.row)" placeholder="請輸入審核數(shù)量" />
但是你可以在自定義參數(shù)之前加入 $event 這個變量，然后再傳其他值，這樣的話event事件的回調(diào)參數(shù)就會有了。
例如：
<input :value="scope.row.confirmAmount" @change="updateConfirmAmount($event, scope.row)" placeholder="請輸入審核數(shù)量" />
下面是我今天解決問題的案例：
<code class="language-html"><!-- 明細列表 -->
<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="請輸入審核數(shù)量" />
</template>
</el-table-column>
</el-table></code>
對應的方法：
updateConfirmAmount(data, row){
var _value = data.currentTarget._value;
var value = data.currentTarget.value;
},
最后抱怨一句：csdn的編譯器越來越不好用了！
以上這篇解決element UI 自定義傳參的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue項目中v-model父子組件通信的實現(xiàn)詳解
vue.js，是一個構建數(shù)據(jù)驅動的 web 界面的庫。Vue.js 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。下面這篇文章主要給大家介紹了關于vue項目中v-model父子組件通信實現(xiàn)的相關資料，需要的朋友可以參考下。2017-12-12
這篇文章主要介紹了vue/cli3版本打包如何去掉soucemap文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue3中reactive和ref的實現(xiàn)與區(qū)別詳解
reactive和ref都是vue3實現(xiàn)響應式系統(tǒng)的api,他們是如何實現(xiàn)響應式的呢,reactive和ref又有什么區(qū)別呢,下面小編就來和大家詳細講講,希望對大家有所幫助2023-10-10
這篇文章主要介紹了Vue 動態(tài)添加路由及生成菜單的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
這篇文章主要為大家介紹了Backbone前端框架核心及源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
element?el-upload文件上傳覆蓋第一個文件的實現(xiàn)
這篇文章主要介紹了element?el-upload文件上傳覆蓋第一個文件的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue-video-player實現(xiàn)實時視頻播放方式(監(jiān)控設備-rtmp流)
這篇文章主要介紹了vue-video-player實現(xiàn)實時視頻播放方式(監(jiān)控設備-rtmp流)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
解決vue項目報錯webpackJsonp is not defined問題
下面小編就為大家分享一篇解決vue項目報錯webpackJsonp is not defined問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
在 Vue3 中,setup 函數(shù)是一個新引入的概念,它代替了之前版本中的 data、computed、methods 等選項,用于設置組件的初始狀態(tài)和邏輯,本文將主要介紹Setup的基本用法和少量原理2024-02-02
文章介紹了一個父組件和子組件的交互過程,父組件通過點擊“關聯(lián)公司”輸入框彈出子組件dialog,子組件中使用SelectCompany.vue實現(xiàn)默認選中功能,作者分享了個人經(jīng)驗,希望能對大家有所幫助2025-01-01