element-ui组件中的input等的change事件中传递自定义参数
以select为例,如果select写在循环里,触发change事件时可能不只需要传递被选中项的值,还要传递index过去,来改变同一循环中的其他标签的状态。
下面这样写是无效的:
@change="changeStatus(val, index)"
<div v-for="(item,index) in itemList">
<el-select v-model="item.value" @change="changeStatus(val, index)">
<el-option v-for="op in options"
:key="op.key":
:label="op.label"
:value="op.label">
</el-option>
</el-select>
</div>
这样再封装一层就可以了:
@change="((val)=>{changeStatus(val, index)})"
<div v-for="(item,index) in itemList">
<el-select v-model="item.value" @change="((val)=>{changeStatus(val, index)})">
<el-option v-for="op in options"
:key="op.key"
:label="op.label"
value="op.label">
</el-option>
</el-select>
</div>
element-ui组件中的input等的change事件中传递自定义参数的更多相关文章
- element ui组件的开始时间-结束时间验证
<el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...
- (Element UI 组件 Table)去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- 解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题
Html <input id="file" type="file" accept=".map" onchange="uplo ...
- element ui源码解析 -- input篇
el-input是element ui中使用最频繁的组件之一了,分析其构成从四个方面入手:DOM结构,属性,样式,事件入手 DOM结构: <div> <input /> < ...
- vue-cli按需引入Element UI组件
一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...
- 如何在element-UI 组件的change事件中传递自定义参数
以select为例,如果select写在循环里,触发change事件时可能不只需要传递被选中项的值,还要传递index过去,来改变同一循环中的其他标签的状态. 下面这样写是无效的: @change=& ...
- <input type="file"> change事件异常处理办法
问题:最近发现一个奇怪的bug, 那就是在上传图片需要采用input type=file来进行文件选择.由于为了适应美工的UI图,所以是把选择文件的input框隐藏了.然后通过另外一个按钮的点击事件来 ...
- 【C#】往按钮事件中传递自定义参数
情景:代码动态生成的按钮,需要自定义点击事件.但是生成的点击事件的参数是固定的,如何才能传入自定义的参数? Button btn = new Button() { Content = "这是 ...
- onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)
转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...
随机推荐
- CMU-14445 数据库原理 汇总
LAB1:Extendible Hash Table, LRU, BUFFER POOL MANAGER LAB2:实现一个支持并发操作的B+树 LAB3:事务隔离,two-phase locking ...
- DevExpress的LookUpEdit怎样不显示列名
场景 DevExpress的下拉框控件LookUpEdit的使用.添加item选项值.修改默认显示值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/articl ...
- IDEA开发、测试、生产环境pom配置及使用
pom文件 一般放在最下面,project里 <!--开发环境.测试环境.生产环境--> <!--生产环境--> <profiles> <profile> ...
- Linux Pptpd
准备环境 1 主机ip:192.168.0.107 2 VPN服务器: ens32:192.168.0.102 ens33:127.16.1.10 软件安装 [root@localhost ~]# y ...
- java之枚举和注解
JDK1.5新增的enum关键字用于定义枚举类. 枚举类和普通类的区别: 使用enum定义的枚举类默认继承了java.lang.Enum类: 枚举类的构造器只能使用private修饰符: 枚举类的所有 ...
- .net上传文件,大文件及下载方式汇总(转)
原文地址:http://www.360doc.com/content/19/1219/10/67993814_880731215.shtml Brettle.Web.NeatUpload.dll 文件 ...
- Laravel 框架对于分表进行统计合并查询的思路
当对数据表进行水平分表之后,若要进行数据统计,往往需要对所有分表一起进行联合查询.在使用 Laravel 框架时,可以利用 Model 类的 setTable 方法对于多个表进行合并查询. 举个例子, ...
- WPF无边框可拖动窗体
下面主要记录下创建无边框窗体,并且可以拖动.这种窗体主要用于弹出小窗体时. <Window x:Class="WpfApplication1.MainWindow" xmln ...
- Flask 路由,配置,蓝图
路由 # -*- coding: utf-8 -*- from flask import Flask, url_for app = Flask(__name__) ...
- java后台树形结构展示---懒加载
一.数据库设计 二.实体类:entity import com.joyoung.cloud.security.common.validatedGroup.Add;import com.joyoung. ...