解决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 相关文章推荐
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
js动态引入的四种方法
May 05 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
PHP新手入门学习方法
2011/05/08 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
详解Python import方法引入模块的实例
2017/08/02 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python 实现list或string按指定分段
2019/12/25 Python
Python生成器常见问题及解决方案
2020/03/21 Python
python如何进入交互模式
2020/07/06 Python
Python 如何实现访问者模式
2020/07/28 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
CSMA/CD介质访问控制协议
2015/11/17 面试题
历史系毕业生自荐信
2013/10/28 职场文书
精细化工应届生求职信
2013/11/17 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
经典演讲稿汇总
2014/05/19 职场文书
物理教育专业求职信
2014/06/25 职场文书
卖房协议书样本
2014/10/30 职场文书
民间借贷借条范本
2015/05/25 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
为Centos安装指定版本的Docker
2022/04/01 Servers