解决element UI 自定义传参的问题


Posted in Javascript onAugust 22, 2018

如下所示:

<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 自定义传参的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
javascript 全等号运算符使用说明
May 31 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
js调用网络摄像头的方法
Dec 05 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 #Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 #Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 #Javascript
Vue动态获取width的方法
Aug 22 #Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 #Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 #Javascript
Vue之mixin全局的用法详解
Aug 22 #Javascript
You might like
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
python正则表达式爬取猫眼电影top100
2018/02/24 Python
详解Python发送email的三种方式
2018/10/18 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
毕业生个人的求职信范文
2013/12/03 职场文书
医院实习介绍信
2014/01/12 职场文书
考博专家推荐信
2014/05/10 职场文书
八月迷情观后感
2015/06/11 职场文书
2016情人节宣传语
2015/07/14 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
学风建设主题班会
2015/08/17 职场文书
解除合同协议书范本
2016/03/21 职场文书