解决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 相关文章推荐
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
关于document.cookie的使用javascript
Oct 29 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
js操作iframe父子窗体示例
May 22 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
vue中render函数的使用详解
Oct 12 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
用console.table()调试javascript
2014/09/04 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
js实现简易计算器功能
2019/10/18 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
Python中集合类型(set)学习小结
2015/01/28 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
深入理解Django-Signals信号量
2019/02/19 Python
详解Python循环作用域与闭包
2019/03/21 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
存储过程和函数的区别
2013/05/28 面试题
档案检查欢迎词
2014/01/13 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
房屋转让协议书
2014/10/18 职场文书
求职自我评价怎么写
2015/03/09 职场文书