iview 中事件处理函数中的$event参数获取原生事件发出的信息

最新推荐文章于 2023-02-17 08:59:03 发布
最新推荐文章于 2023-02-17 08:59:03 发布
阅读量343 收藏
点赞数
文章标签： python java js vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35516360/article/details/122065341
版权
本文介绍了在iview框架中，如何在Input组件的on-change事件处理函数中同时传递额外参数和保留原生事件信息。通过示例展示了在事件处理函数中使用$event获取默认的event返回值，并结合自定义参数实现更灵活的功能。
摘要由CSDN通过智能技术生成

原文链接: iview 中事件处理函数中的$event参数获取原生事件发出的信息

上一篇: js 运行时

下一篇: vuex-router-sync 将vuex和route 相结合

在每一次输入框数据变化时, 获取到输入框对应的数组下标和新的数据

aeaa879d1da963f70fd6b4df76ff73c3d22.jpg28409eeaa9b08fe7d07d874a26735d6ec59.jpg

一、最近用 iview 遇到这样一个需求，在使用 iview 的组件时，希望在其定义的某个钩子事件的处理函数中传递额外的一个参数，同时又不影响该钩子事件默认的返回值。最后在网上查找资料找到了解决办法，这里把解决方案贴出来，仅供大家参考！

二、我们以 iview 中 Input 组件为例，首先根据 iview 中 Input 组件的文档可以知道&#x

最低0.47元/天 解锁文章
阿豪boy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iview的api踩坑之events,props和返回值
九五二七的博客
05-15 601
组件之间有父子的组织关系的话，要看清api的触发主体 一般有父子组织的话，触发的事件，会放在父组件上，但是触发会由子组件触发 如果带有返回值的话，一般返回的是子组件的某个值 官网说的on-select并不等于onselect/@select vue中onchange和onkeydown等都是可以简写成@change的 但是iview特意表明了一个on-click，这种连字符写法的event，是特殊了，我一开始以为就是普通的onclick，发现并无法获取到返回值，试了@click，也无法获取到。
iview给radio按钮组件加点击事件的实例
12-29
如下所示： 商家电话 负责人电话 ()>输入新的电话</Radio></span> iview的单选按钮如果想要加点击事件，加在 RadioGroup 上和 Radio 上都不生效，这时，可以给组件外
vue中$event的使用
看表该写博客了
05-23 1万+
$event分两种：第一种: 自定义组件（不如自定义父子组件或者elementui/iview组件）的$event 第二种： html原生的$event 先来看第一种吧--自定义组件的$event $event代表的就是 济南 青岛 这个选中的值，此时$event就代表传参 第二种 html原生的$event $event此时是获取的dom元素即 MouseEvent鼠标点击的这个按钮元素，(可理解为当前标签的属性) console....
Vue中$event的用法
Potry Code的博客
02-05 1万+
因为在Vue API文档里$event的用法找不到，所以我自己总结了一下。 通常的用法是用来获取当前元素的最新值。$event.target.value <body> <div id="app"> <input type="text" @click="abc($event)" value="123" /> </div> ...
web前端之vue知识点
软件毕设协助及软件开发、智慧电子模块、计算机科技、软件开发、硬件开发、程序员、写代码、工程师、互联网、物联网、技术栈、程序、编程、IT。
12-08 7018
web前端之vue知识点
前端开发——Vue 事件参数$event
helloyangkl的博客
02-17 791
前端开发——Vue 事件参数$event
浅谈vue中$event理解和框架中在包含默认值外传参
10-14
总的来说，Vue.js的$event变量为我们提供了一种灵活的方式来处理和传递事件相关的原始数据，同时还能与其他自定义参数一起使用，确保了在组件间的通信中能够传输所有必要的信息。理解并正确使用$event可以帮助我们更...
vue iview组件表格 render函数的使用方法详解
01-19
如果要在标签中加入属性，例如img 中src属性 a标签中href属性 此时需要用到 attrs 来加入而不是props { title: '操作', key: 'action', align: 'center', render: function (h, params) { return h('div', ...
基于IView中on-change属性的使用详解
08-27
基于IView中on-change属性的使用详解 IView是一个基于Vue.js的UI组件库，它提供了许多实用的组件和指令，可以帮助开发者快速构建Web应用程序。在IView中，on-change属性是一个非常重要的属性，它可以用来监听输入框...
iview - 事件需要同时获取event之外的参数
idomyway的博客
12-01 571
前言     在项目中，使用iview中使用select中的事件on-change，可以获取event当前选择项，同时传入别的参数 解决方法     使用箭头函数解决 <Select v-model="model13" filterable :remote-method="remoteMethod1" :loading="loading1" @on-change="event => change
Vue change事件、click点击事件，传参数时保持默认的参数
PrimaryColor
07-24 6346
想要保存事件回调函数原有的参数，在触发事件是添加"$event"参数。 <input type="text" v-model="item.count" @change="updateNumber($event,index)" /> //更新 val为原有的参数，当input的值改变时触发。 index为传入的下标。 updateNumber(val, index) { console.log(val, index); }, ......
工作中对 Vue 和 iView 的一些技术备忘总结
廿四桥明月夜的博客
07-25 644
工作中对 Vue 和 iView 的一些技术备忘总结 其他 2018-06-10 12:07:17 阅读次数: 4   Vue 不方便取数据时,可以使用 refs 有时直接把 v-for(item, key) 的 item 绑定为 v-model 会报错,这时可以把数据格式化一下,让 item 为对象,再绑定 v-model 到对象的属性上 iView 框架的 Da...
iviewSelect选择器 表单验证以及数据回显
aibujin的博客
10-18 3265
当我们使用 iview 开发项目时，使用Select 选择器，可能会遇到多选的情况(类似下面的截图)，那么这种情况应该怎么进行表单验证、获取到接口数据怎么进行数据回显呢 ？？？ form表单验证默认绑定数据类型是string，如果需要绑定的多个值就需要使用array； 废话不多说，直接上代码 <FormItem label="人员:" prop="taskPerson"> ...
vue中$event理解和框架中在包含默认值外传参
热门推荐
山海一哥的博客
05-30 2万+
在vue中普通方法中默认带有event DOM事件如greet方法，如果是内联函数的话如warn方法，只需要在定义方法的地方同时传入**event∗∗即可，这里需要强调的是在iview中，这里用的是select组件，在其‘on−change‘事件中如果想要传入自定义的参数，使用直接传参的方式，获取的是传入的参数，那么如何获取到该方法默认的返回值（即不传参数时返回的默认选中值），这里使用∗∗e...
工作中对 Vue 和 iView/Element 的一些技术备忘总结
汤一飞
05-19 4996
如题
iview日期控件，双向绑定日期格式
qq_31971935的博客
07-04 2万+
日期在双向绑定之后格式为：2017-07-03T16:00:00.000Z 想要的格式为2017-07-04调了好久，几乎一天：用一句话搞定了 @on-change=”addForm.Birthday=$event”<Date-picker placeholder="选择日期" type="datetime" v-model="addForm.Birthday" :key="addForm
Vue 获取事件的 event 对象(2种方式)
前端技术
02-23 1万+
方式一：默认获取 不填写时，默认第一个参数就是 event 对象。 <template> <div> <button @click="onClick">点击</button> </div> </template> <script> export default { methods: { onClick(e) { console.log(e
iview table 方法若干
杨航的专栏
05-10 2万+
新增默认选中 1. _checked字段增加 2. 给data项设置特殊 key _checked: true2.0 多选框样式错乱，默认选中问题 1. 修改为元素checkbox 样式大概调整 2. 如果样式不好看 可以自行修改或者使用其他组件ui checkboxAPIprops属性说明类型items显示的结构化数据Arraycolumns表格列的配置描述Arraycolumns属性说明类...
iview组件事件额外传递参数
w13707470416的博客
03-27 2143
&lt;template&gt; &lt;Table border :columns="columns6" :data="data5" @on-row-click="(row, index) =&gt; { youFunc(row, index , 'params')}"&gt;&lt;/Table&gt; &lt;/t...
iview中的表格render函数如何写入disabled
最新发布
05-30
在iview的表格组件中，可以通过render函数来自定义表格的每一列。如果你想要在表格中的某一列中添加一个disabled属性，可以按照以下方式编写代码： ```javascript <template> <Table :data="tableData"> <Table-column title="操作" key="action" align="center" width="120" render={(h, params) => { return h('div', [ h('Button', { props: { type: 'primary', size: 'small', disabled: params.row.disabled // 此处将disabled属性设置为params.row.disabled }, on: { click: () => { // 按钮点击事件 } } }, '按钮') ]); }} /> </Table> </template> ``` 在上面的代码中，我们在Table-column组件的render函数中创建了一个Button组件，并在Button组件的props属性中设置了disabled属性为params.row.disabled。这样，当params.row.disabled为true时，按钮就会被禁用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值