elementUI-input输入框change事件添加其他参数

最新推荐文章于 2024-06-04 10:23:10 发布
最新推荐文章于 2024-06-04 10:23:10 发布
阅读量3.6k 收藏 6
点赞数 1
分类专栏： 基础前端 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/taoqidexiaojie/article/details/123655410
版权

需求：在下拉框值改变的时候，我们需要记住改的值得index，并且根据index找到下拉框数组对应数组中的对象，改变对象其他参数的值

问题：elementUI中，change事件值携带了value，如果我们写成@change=“changeValue(value,index)",代码则会直接报错

解决办法：@change="((val)=>{changeValue(val, index)})"通过箭头函数来进行传参

 

 

shuaijie0518
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端小工具 - js模拟键盘、鼠标事件给element form批量赋值
06-24
在前端开发中，有时我们需要对页面上的表单（form）元素进行批量赋值，这通常涉及到JavaScript（js）的事件处理和DOM操作。本话题主要探讨如何利用JavaScript的Web API，如MouseEvent、InputEvent和KeyboardEvent，...
信息管理系统(SpringBoot+Mybatis+POI+Vue+ElementUI)
11-02
在页面代码中，可以看到ElementUI的`el-form`、`el-input`、`el-button`等元素，它们为表单创建和操作提供了便利，如添加、删除、查询、导入和导出功能。 **POI** 是Apache的一个开源项目，专门用于读写Microsoft ...
js vue elementui 表单自带input,change,blur,foucs事件新增自定义参数
战国墨竹的博客
09-22 2926
<el-input v-model="xxx" @input="((val,name)=>{handleInput(val,'name')})" @blur="((e,name)=>{fixedTwo(e,'name')})"></el-input> handleInput(value,name){ console.log("value",value) console.log("name",name) } fixedTwo(e,name){ con.
element-ui组件中input等的change事件中传递自定义参数
12-29
以select为例，如果select写在循环里，触发change事件时可能不只需要传递被选中项的值，还要传递index过去，来改变同一循环中的其他标签的状态。 下面这样写是无效的： @change=changeStatus(val, index) <div v-for=(item,index)> <el v-model=item.value change=changeStatus(val,> <el-option v-for=op in options :key=op.key:
el-input中change事件造成的坑
最新发布
MISS_zhang_0110的博客
06-04 748
仅在输入框失去焦点或用户按下回车时触发。
element中input的change事件
m0_49471668的博客
11-09 3984
element中input的change事件是移除焦点才触发： <el-input placeholder="同事姓名或账号" suffix-icon="el-icon-search" v-model="keyword" @change="handlerPageNo" style="width: 180px;"></el-input> 想要变成输入就出发： 解决： 使用@input 我这里需要判断密码的强度，所以一输入的时候就得触发，所以使用@
element-ui中的input的change事件中传递参数
weixin_44937463的博客
12-11 4854
element-ui中的input的change事件中传递参数 @change="((val)=>{changeStatus(val, index)})"
element 输入框点击事件_ElementUI的input事件问题
weixin_39609573的博客
12-20 2975
最近用ElementUI的el-input组件，然后发现一个问题，就是我在输入框后，加一个icon的button，然后我希望这个输入框可以触发两个事件，第一个是，输入完，按键盘回车键的事件，第二个是，输入完，点icon的button的click事件。然后翻阅文档，发现可以给input加@change事件，这样按回车可以搜索，然后可以把icon的button写成slot的方式然后给button加@c...
ElementUI三级联动菜单代码
06-07
监听`change`事件，当用户选择一项后更新数据。 4. **清空功能**：添加一个清除按钮或链接，绑定到清空输入的函数。 在提供的压缩包中，`readme.md`文件可能包含了关于如何配置和使用这个三级联动菜单的详细说明，...
Vue 实现分页与输入框关键字筛选功能
10-15
在Vue.js中，实现分页和输入框关键字筛选功能是常见的需求，特别是在处理大量数据时。Element UI 是一个流行的前端 UI 框架，它提供了丰富的组件库，其中包括分页组件，这使得在Vue中实现这些功能变得相对简单。下面...
element-ui-api-2.x版本.zip
10-10
例如，`el-table`组件的`props`有`data`（数据源）、`stripe`（斑马纹样式）、`border`（显示边框），`events`有`sort-change`（排序变化时触发），`methods`则有`toggleRowSelection`（切换行的选中状态）等。...
使用ElementUI的@input,@change,@blur,@focus进行校验文本框的长度，提示还可以输入多少字
有时间可以指导毕业设计，可以私聊我。一个热爱编程的smallCuteMonkey，可以私信我
05-16 2358
文章目录1. 需要校验的文本框加上@input2.校验的methods: 1. 需要校验的文本框加上@input <!-- 优选标记弹框 --> <el-dialog v-dialogDrag title="优选标记" :visible.sync="starFlag" class="dialog" width="30%"> <el-form :model="dataForm" label-width="100px"> <el-
uniapp，@input @change @blur 等事件，需要传额外参数的方法
热门推荐
青衫折扇的博客
06-09 1万+
这里以input为例，先看效果
element-ui input @change事件中保留默认参数情况下并传入自定义参数
WaiteZQ的博客
04-06 1647
elementUI @chang事件保留默认值并传入自定义参数
el-input的@change事件自定义传参
JandyPam的博客
12-27 3799
el-input的@change事件自定义传参
[element-ui] el-dropdown @command 增加额外参数
qq_14993591的博客
03-27 337
【代码】[element-ui] el-dropdown @command 增加额外参数。
el-input绑定事件
04-28
el-input是ElementUI中的一个输入框组件，可以用来实现用户输入数据的功能。在Vue项目中，我们通常需要对el-input组件进行数据绑定和事件绑定，以实现数据的响应式和事件的处理。 对于el-input组件的数据绑定，我们可以利用v-model指令来实现。例如，我们可以将一个字符串变量绑定到el-input的value属性上，当用户在输入框中输入内容时，这个字符串变量就会自动更新： ```html <el-input v-model="text"></el-input> ``` 在Vue实例中，我们可以定义一个data属性text，作为el-input组件的数据源： ```js export default { data() { return { text: '' } } } ``` 这样就实现了一个简单的双向绑定，当用户在输入框中输入文本时，text属性就会实时更新。 除了数据绑定，我们也可以通过el-input组件的@事件名来监听组件发生的事件，例如输入框内容变化事件change、焦点获取事件focus等等。如下所示，我们定义了一个名为handleChange的方法，当用户在输入框中输入内容时，就会触发这个方法并将输入框内容作为参数传递进去： ```html <el-input v-model="text" @change="handleChange"></el-input> ``` ```js export default { data() { return { text: '' } }, methods: { handleChange(value) { console.log('输入框内容变为：', value); } } } ``` 绑定事件的方式与data属性的绑定方式类似，都是在Vue实例对象上定义一个methods属性，将事件处理函数定义在该属性内部即可。通过这种方式，我们可以方便地监听el-input组件的各种事件，以完成输入框的验证、联想提示等任务。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值