iview的api踩坑之events,props和返回值

最新推荐文章于 2022-11-16 15:20:31 发布
最新推荐文章于 2022-11-16 15:20:31 发布
阅读量608 收藏
点赞数
分类专栏： 前端 文章标签： vue javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46934884/article/details/106140627
版权
本文介绍了在使用IVIEW组件时遇到的事件绑定问题，特别是on-select与@select的区别，强调在Vue中简写的事件如@change对应于onchange。在处理on-click事件时，需要使用@on-click来正确触发并获取返回值。当尝试传递多个参数时遇到了困难，作者分享了自己的探索过程，并希望得到社区的帮助。
摘要由CSDN通过智能技术生成

组件之间有父子的组织关系的话，要看清api的触发主体

  1. 一般有父子组织的话，触发的事件，会放在父组件上，但是触发会由子组件触发
  2. 如果带有返回值的话，一般返回的是子组件的某个值
    menu events
    子组件属性

官网说的on-select并不等于onselect/@select

vue中onchange和onkeydown等都是可以简写成@change的

但是iview特意表明了一个on-click，这种连字符写法的event，是特殊了，我一开始以为就是普通的onclick，发现并无法获取到返回值，试了@click，也无法获取到。
在这里插入图片描述

		<Tabs type="card" @click="testOnclick">
			    <Tab-Pane key="tab0" lab
最低0.47元/天 解锁文章
徐州谢广坤
关注
专栏目录
iview 中事件处理函数中的$event参数获取原生事件发出的信息
阿豪
11-10 347
原文链接: iview 中事件处理函数中的$event参数获取原生事件发出的信息 ...
iview-admin项目源码和api
03-07
iview-admin项目源码和api,由于公司禁止访问gitbub，所以gitbug上view-admin的源码无法访问，所以上次到csdn上可以到公司下载下来学习
iview - 事件需要同时获取event之外的参数
idomyway的博客
12-01 575
前言     在项目中，使用iview中使用select中的事件on-change，可以获取event当前选择项，同时传入别的参数 解决方法     使用箭头函数解决 <Select v-model="model13" filterable :remote-method="remoteMethod1" :loading="loading1" @on-change="event => change
iView组件添加API中介绍的事件的方式(render方式添加事件)
weixin_30933531的博客
07-30 296
iView组件好用，文档齐全，品质可靠稳定。最大的好处是使用了Vue框架，使很多数据绑定和交互问题变的轻松，是难得的开源前端组件。给作者点个赞。用这个组件来学习Vue.js也是不错的选择。 最近用的比较多。碰到的主要问题是绑定事件，试了很多种写法，可能是对vue不太了解，一直没试对。最终发现写法其实很简单。 用现成的组件，比如API里写了一个事件是on-change，那么绑定事件写法是这样的 ...
iview 自定义时间选择器组件_表单组件 - TimePicker 时间选择器 - 《View UI（即iView）4.2 使用手册》 - 书栈网 · BookStack...
weixin_32179097的博客
02-23 1593
TimePicker 时间选择器概述选择或输入标准时间，支持选择范围。代码示例基础用法设置属性 type 为 time 或 timerange 分别显示选择单个时间和选择范围时间类型。设置属性 placement 可以更改选择器出现的方向，与 Poptip 和 Tooltip 配置一致，支持 12 个方向，详见 API。exportdefault{}时间格式设置属性 format 可以改变时间的显...
iview 级联选择组件_表单组件 - Cascader 级联选择 - 《View UI（即iView）4.2 使用手册》 - 书栈网 · BookStack...
weixin_39613839的博客
12-22 900
Cascader 级联选择概述从一组相关联的数据集合中进行选择，常用于省市区、公司级层、事务分类等。相比 Select 组件，可以一次性完成选择，体验更好。代码示例基础用法级联选择对数据有较严格要求，请参照示例的格式使用data，每项数据至少包含 value、label 两项，子集为 children，以此类推。value 为当前选择的数据的 value 值的数组，比如 ['beijing', '...
iview 自定义时间选择器组件_表单组件 - TimePicker 时间选择器 - 《iview v3.x 官方文档手册》 - 书栈网 · BookStack...
weixin_39857899的博客
12-20 520
TimePicker 时间选择器概述选择或输入标准时间，支持选择范围。代码示例基础用法设置属性 type 为 time 或 timerange 分别显示选择单个时间和选择范围时间类型。设置属性 placement 可以更改选择器出现的方向，与 Poptip 和 Tooltip 配置一致，支持 12 个方向，详见 API。exportdefault{}时间格式设置属性 format 可以改变时间的显...
iview学习帮助文档
weixin_40885337的博客
03-25 3345
安装iview npm install view-design --save 导入iview 在main.js中导入iview import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css'; Vue.use(ViewUI); 按需引用iview组件 a.安装babel npm install babel-plugin-import --save-dev b.在 .babelrc 文件中 { "plugins
Vue2.0操作文档API
09-20
Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
使用 iview 组件 Carousel 制作首页轮播图
weixin_48674314的博客
08-24 2025
当我们需要制作轮播图时，一般是使用插件Swiper。 npm i swiper 但是现在iview 中自带了Carousel组件可以制作简单的轮播图，操作起来十分简单。 这是官方给出的Api： 代码如下： <Carousel :loop="true" :autoplay="true" :autoplay-speed="3000" arrow="never" > <CarouselItem> <img class="img" src="~@/i.
iview使用
wu_di_tian_xia的博客
01-23 2951
iview使用：    1：安装     2：在main.js文件中引用       3：在组建中中就可以使用该ui,简单布局：
iviewSelect选择器 表单验证以及数据回显
aibujin的博客
10-18 3285
当我们使用 iview 开发项目时，使用Select 选择器，可能会遇到多选的情况(类似下面的截图)，那么这种情况应该怎么进行表单验证、获取到接口数据怎么进行数据回显呢 ？？？ form表单验证默认绑定数据类型是string，如果需要绑定的多个值就需要使用array； 废话不多说，直接上代码 <FormItem label="人员:" prop="taskPerson"> ...
vue2+iview 图片文件上传 Upload组件
鹤渺的星球
11-16 1050
记录一个图片上传的功能，满足只能上传一张图片，并且可以需要判断上传图片是否为png，且大小不能超过2MB，除此之外，先上传图片，再点击提交按钮提交图片。
iview 文件的上传和下载
wytraining
08-27 2588
一：上传文件 1.html //action: 上传的地址，必填 //data: 上传时附带的额外参数 //on-success: 文件上传成功时的钩子，返回字段为 response, file, fileList <Upload :action= "env + '/Manage/upload'" :data="{companyId: row.ID}" :on-success="success"> <
Iview上传组件的使用笔记
qq_23257451的博客
07-01 1126
在使用iview ui作为前端框架时，记录其中上传组件的笔记 1.ref=“upload” ref=“upload”：ref必须这样写，如果不这样写，则无法上传，我在想万一有这样的场景，一个表单里面有两个字段需要是上传文件类型，ref都为"upload"如果都放在一个组件内，ref则类似DOM元素的ID，可想而知，两个一样名称的ID，会让产生混淆，有兴趣的网友可以自行尝试下，也许也不会遇到这个问题。multiple：是否允许多个文件上传before-upload：如果没有阻止上传组件的自动上传事件，那么上传
Vue请求接口封装
qq_39241544的博客
11-13 3599
vue接口封装 封装请求方法 import axios from 'axios' import { Message } from 'iview' //axios请求拦截 service.interceptors.response.use(response => { //统一处理返回信息 const res = response.data //根据自己接口格式处理 ...
iView导航菜单Menu切换后图标不显示的问题处理
ghost的博客
07-21 1541
因为用惯了vue2.0，所以搭配iView还是使用的ViewUI，结果再想使用切换菜单时发现官方给的例子出现图标不显示的bug，不知道Plus会不会出现这个问题。
iview table和switch一起使用时怎么使返回值selection中包含switch的值
最新发布
05-31
在 iView Table 中，当使用 Switch 组件时，我们可以通过监听 Switch 组件的 change 事件，将其选中状态的值加入到 Table 的 selection 中。 以下是示例代码： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值