解決element UI 自定義傳參的問(wèn)題

發(fā)布時(shí)間：2020-10-21 17:11:15 來(lái)源：腳本之家閱讀：392 作者：userkang 欄目：web開(kāi)發(fā)

如下所示：

<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)})" // 寫(xiě)個(gè)閉包就可以了，index表示第幾個(gè)組件
></el-autocomplete>

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

要想在element的 event事件中增加自定義參數(shù)，如果你直接在方法中寫(xiě)，他就會(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 > 
  <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è)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

解決element UI 自定義傳參的問(wèn)題

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽