解决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 处理数组重复元素示例代码
Dec 27 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
微信小程序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
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python模块的加载讲解
2019/01/15 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python中的流程控制详解
2021/02/18 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
运动会广播稿500字
2014/01/28 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
庆元旦广播稿
2014/02/10 职场文书
入党函调证明材料
2014/12/24 职场文书
公司奖励通知
2015/04/21 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL