解决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 相关文章推荐
json 定义
Jun 10 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
手把手教你从零开始react+antd搭建项目
Jun 03 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
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
PDO::exec讲解
2019/01/28 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
javascript模块化简单解析
2016/04/07 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
Python实现多进程的四种方式
2019/02/22 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
python元组拆包实现方法
2021/02/28 Python
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
建筑工程实习自我鉴定
2013/09/19 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
简单租房协议书
2014/10/21 职场文书
二审答辩状格式
2015/05/22 职场文书
python语言中pandas字符串分割str.split()函数
2022/08/05 Python