解决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中将字符串转换成json的三种方式
Jan 12 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 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中的empty和isset函数
2016/05/26 PHP
ext 代码生成器
2009/08/07 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
初步解析Python下的多进程编程
2015/04/28 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
wxPython中listbox用法实例详解
2015/06/01 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
python2.7到3.x迁移指南
2018/02/01 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
python使用turtle库绘制树
2018/06/25 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
美国真皮手袋品牌:GiGi New York
2017/03/10 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
工商管理实习生自我鉴定范文
2013/12/18 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
python for循环赋值问题
2021/06/03 Python
Redis高并发缓存架构性能优化
2022/05/15 Redis