解決element UI 自定義傳參的問題

更新時間：2018年08月22日 11:51:47 作者：userkang

今天小編就為大家分享一篇解決element UI 自定義傳參的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如下所示：

<el-autocomplete
 v-model="state4"
 :fetch-suggestions="querySearchAsync"
 placeholder="請輸入內容"
 @select="handleSelect"
></el-autocomplete>

這里的 hanleSelect 默認綁定的參數是選中的那條數據。

但是如果一個頁面有好幾個相同的組件，要想知道選中的是第幾個。

@select="handleSelect(item, index)" // 這樣肯定不行的

解決方法：

<el-autocomplete
 v-model="state4"
 :fetch-suggestions="querySearchAsync"
 placeholder="請輸入內容"
 @select="((item)=>{handleSelect(item, index)})" // 寫個閉包就可以了，index表示第幾個組件
></el-autocomplete>

基于element-UI 事件添加額外自定義參數的方法

要想在element的 event事件中增加自定義參數，如果你直接在方法中寫，他就會將原來的參數覆蓋！

例如：

<input :value="scope.row.confirmAmount" @change="updateConfirmAmount(scope.row)" placeholder="請輸入審核數量" />

但是你可以在自定義參數之前加入 $event 這個變量，然后再傳其他值，這樣的話event事件的回調參數就會有了。

例如：

 <input :value="scope.row.confirmAmount" @change="updateConfirmAmount($event, scope.row)" placeholder="請輸入審核數量" />

下面是我今天解決問題的案例：

<code class="language-html"><!-- 明細列表 --> 
<el-table :data="midSubmitDetailTableData"  border stripe style="width: 100%"> 
  <el-table-column prop="submitAmount" label="本次交工數量"></el-table-column> 
  <el-table-column prop="confirmAmount" label="審核數量"> 
    <template slot-scope="scope"> 
      <input :value="scope.row.confirmAmount" @change="updateConfirmAmount($event, scope.row)" placeholder="請輸入審核數量" /> 
    </template>   
  </el-table-column> 
</el-table></code>

對應的方法：

updateConfirmAmount(data, row){
  var _value = data.currentTarget._value;
  var value = data.currentTarget.value;
 
},

最后抱怨一句：csdn的編譯器越來越不好用了！

以上這篇解決element UI 自定義傳參的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue+Echarts實現基本K線圖的繪制
這篇文章主要為大家詳細介紹了如何利用Vue和Echarts實現基本K線圖的繪制，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下
2023-03-03
vue-devtools 打開源碼位置實現過程
這篇文章主要為大家介紹了vue-devtools 打開源碼位置實現過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
element?ui?日期選擇器el-date-picker如何修改指定日期背景(點擊指定背景色日期變深色)
這篇文章主要介紹了element?ui?日期選擇器el-date-picker?修改指定日期背景,點擊指定背景色日期變深色,本文通過實例效果展示給大家介紹的非常詳細,感興趣的朋友一起看看吧
2024-07-07
vue3開啟攝像頭并進行拍照的實現示例
本文主要介紹了vue3開啟攝像頭并進行拍照的實現示例,主要是使用navigator.mediaDevices.getUserMedia這個API來實現,具有一定的參考價值,感興趣的可以了解一下
2024-01-01
解決vue3項目中el-menu不兼容SSR問題
這篇文章主要介紹了解決vue3項目中el-menu不兼容SSR問題,需要的朋友可以參考下
2023-12-12
ElementUI時間選擇器限制選擇范圍disabledData的使用
本文主要介紹了ElementUI時間選擇器限制選擇范圍disabledData的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06
VUE實現Studio管理后臺之鼠標拖放改變窗口大小
這篇文章主要介紹了VUE實現Studio管理后臺之鼠標拖放改變窗口大小的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的工作或學習具有一定的參考價值,需要的朋友可以參考下
2020-03-03
vue制作加載更多功能的正確打開方式
這篇文章是一篇Vue.js的教程，目標在于用一種常見的業(yè)務場景——分頁/無限加載，以及編寫過程中自己的錯誤寫法，分享給大家，幫助讀者更好的理解Vue.js中的一些設計思想。
2016-10-10
vue設置頁面背景及背景圖片簡單示例
這篇文章主要給大家介紹了關于vue設置頁面背景及背景圖片的相關資料,在Vue項目開發(fā)中我們經常要向頁面中添加背景圖片,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
2023-08-08
Vue3?響應式系統實現?computed
這篇文章主要介紹了?Vue3?響應式系統實現?computed，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下
2022-06-06