今天小编就为大家分享一篇解决element UI 自定义传参的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

<el-autocomplete
 v-model="state4"
 :fetch-suggestions="querySearchAsync"

 @select="handleSelect"
></el-autocomplete>

这里的 hanleSelect 默认绑定的参数是选中的那条数据。

但是如果一个页面有好几个相同的组件,要想知道选中的是第几个。

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

解决方法:

<el-autocomplete
 v-model="state4"
 :fetch-suggestions="querySearchAsync"

 @select="((item)=>{handleSelect(item, index)})" // 写个闭包就可以了,index表示第几个组件
></el-autocomplete>

基于element-UI 事件添加额外自定义参数的方法

要想在element的 event事件中增加自定义参数,如果你直接在方法中写,他就会将原来的参数覆盖!

例如:

<input :value="scope.row.confirmAmount" @change="updateConfirmAmount(scope.row)" />

但是你可以在自定义参数之前加入 $event 这个变量,然后再传其他值,这样的话event事件的回调参数就会有了。

例如:

 <input :value="scope.row.confirmAmount" @change="updateConfirmAmount($event, scope.row)" /> 

下面是我今天解决问题的案例:

<code><!-- 明细列表 --> 
<el-table :data="midSubmitDetailTableData"  border stripe> 
  <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)" /> 
    </template>   
  </el-table-column> 
</el-table></code> 

对应的方法:

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

最后抱怨一句:csdn的编译器越来越不好用了!

以上这篇解决element UI 自定义传参的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
新东方二季度营收5.97亿美元 高于市场预期

新东方二季度营收5.97

新东方第二季度营收5.971亿美元,市场预期5.776亿美元。
友商的战争 “PPT”手机的哀与兴

友商的战争 “PPT”手

荣耀和小米在手机及周边产品的营销思路和方向确实有相
外交部回应美将向加方正式提出引渡孟晚舟:立即释放

外交部回应美将向加方

我们敦促加方立即释放孟晚舟女士,切实保障她的合法权益
多项财务指标不佳前景不明 小米集团市值继续承压

多项财务指标不佳前景

小米手机增速放缓,将拖累小米智能生态圈的发展,公司前景
直击|全国首个机器人分拨中心启用 比人力快1.6倍

直击|全国首个机器人

菜鸟网络宣布,全国首个物联网(IoT)机器人分拨中心在南京
特斯拉中国回应:特斯拉没有与天津力神签署任何协议

特斯拉中国回应:特斯拉

特斯拉曾经收到过天津力神的报价,但之后没有进展。特斯
最新文章
微信小程序CSS3动画下拉菜单效果

微信小程序CSS3动画下

这篇文章主要为大家详细介绍了微信小程序CSS3动画下拉
微信小程序使用swiper组件实现层叠轮播图

微信小程序使用swiper

这篇文章主要为大家详细介绍了微信小程序使用swiper组
微信小程序实现带缩略图轮播效果

微信小程序实现带缩略

这篇文章主要为大家详细介绍了微信小程序实现带缩略图
小程序实现五星点评效果

小程序实现五星点评效

这篇文章主要为大家详细介绍了小程序实现五星点评效果
微信小程序实现笑脸评分功能

微信小程序实现笑脸评

这篇文章主要为大家详细介绍了微信小程序实现笑脸评分
微信小程序自定义轮播图

微信小程序自定义轮播

这篇文章主要为大家详细介绍了微信小程序自定义轮播图