今天小编就为大家分享一篇解决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 自定义传参的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
《三体》大IP矩阵再出击 耗资超千万舞台剧水土不服?

《三体》大IP矩阵再出

在电影被无限搁置的情况下,舞台剧成为《三体》IP矩阵中
称手游《奇迹封神》抄袭 上海天銮诉百度等索赔300万

称手游《奇迹封神》抄

上海天銮网络技术有限公司称,认为对方手机游戏《奇迹封
中国联通A股第一季度营收731.47亿元 同比下降2.39%

中国联通A股第一季度

中国联通A股(600050.SH)发布了第一季度财报。财报显示,中
中国航天日|这些航天趣闻你知道吗?

中国航天日|这些航天

当然不会,因为航天员是睡在专用睡袋里的,只要将睡袋固定
进入“一元”股时代 乐视网连续三个交易日跌停

进入“一元”股时代

乐视网盘中连续第三个交易日跌停,截至发稿,收于1.83元/
郭台铭参选2020 台金管会要求做好接班人咨询揭露

郭台铭参选2020 台金

顾立雄今早受访并指出,现在对于任何集团在创业第一代有
最新文章
JavaScript解析及序列化JSON的方法实例分析

JavaScript解析及序列

这篇文章主要介绍了JavaScript解析及序列化JSON的方法
如何为vuex实现带参数的 getter和state.commit

如何为vuex实现带参数

这篇文章主要介绍了如何为vuex实现带参数的getter和st
使用VUE+iView+.Net Core上传图片的方法示例

使用VUE+iView+.Net C

这篇文章主要介绍了使用VUE+iView+.Net Core上传图片
JS实现的获取银行卡号归属地及银行卡类型操作示例

JS实现的获取银行卡号

这篇文章主要介绍了JS实现的获取银行卡号归属地及银行
Angular6 用户自定义标签开发的实现方法

Angular6 用户自定义

这篇文章主要介绍了Angular6 用户自定义标签开发的实
React 实现拖拽功能的示例代码

React 实现拖拽功能的

这篇文章主要介绍了React 实现拖拽功能的示例代码,小编