iview在项目中遇到的坑

1、下拉框选中某一项搜索发现总是搜不到，最后发现是选中后选中值后边莫名多了很长的空格，原因很简单，在代码中opction闭合标签和主体没有在一行。

2、iview+vue项目中，用百分比或者display：flex弹性盒布局，而且多层标签下的table容易出现宽度变得很大，在加载中就像加了动画一样宽度在变大。要么改变布局，要么将table宽度设定，如

在初始化时将宽度设为父级宽度的多少或者其他。

3、iview select 远程搜索时，回显后点击搜索框再点击其他地方使其失去焦点则会将回显的搜索词清空。可以参考光放中的setQuery属性。（不建议或者iview的select远程搜索自我感觉不怎么好用，可以自己封装一个）

4、使用v-if要注意，如果里面有初始化获取的数据，容易造成数据丢失。比如v-if中有一个select组件，当true->false->true,下拉框数据容易丢失。

5、iview 中的InputNumber 有设置为空的需求的话，还是建议换成输入框然后加入限制吧，不然会相当麻烦。（比如选择值后再为空，也就是说取消设值，当然这种需求很少）

如：有这么一个需求：新增时候可以为空可以选择值（只能整数字），在修改时候不能为空，这个时候倒不如用input：

HTML：

<FormItem label="序号" prop="serialNumber"><Input v-model="formValidate.serialNumber" :maxlength="5"  style="width: 286px"></Input><!-- <InputNumber :max="100000":min="1"v-model.trim="formValidate.serialNumber"style="width: 286px;"></InputNumber>-->
</FormItem>

data:

const validateAge = (rule, value, callback) => {if (!Number.isInteger(value*1)) {callback(new Error('序号只能为整数字'));} else if(value*1<=0&&!util.isEmpty(value)) {callback(new Error('序号必须大于0'));}else if (util.isEmpty(value)) {if (this.modalFlag.custom.updateBasicData) {callback(new Error('序号不能为空'));}else{callback();}} else{callback();}};

data.return校验:

serialNumber: [{ validator: validateAge, trigger: 'blur'}],

还有很多，当时没注意记录，现在也想不起来了。随手记录多重要的习惯。

转载于:https://www.cnblogs.com/wy120/p/11046328.html

iview在项目中遇到的坑相关推荐

vue项目中onscroll的坑
vue项目中onscroll的坑在项目中需要监听一个组件的scroll事件,以触发到底时加载更多. 但是实际操作下来发现scroll事件并没有被监听到. 通过查询资料得知,监听的目标元素elemen ...
SpringBoot+Vue博客项目中遇到的坑
shiro整合jwt,用于用户登录逻辑流程: 登录流程: 用户登录:输入用户名和密码–>后端校验: –>有异常:处理异常 –>正常,生成jwt 访问接口时,统一被jwtFilter, ...
记录项目中遇到的坑（三）兼容IE浏览器
做PC端项目,有时候需要兼容IE浏览器,所以很多写法都要改变,以下是个人总结的一些写法(兼容到IE9,因为vue.js最低支持到IE9,再往下,需要使用原生JS) PS:项目是通过引入 vue.js ...
记录某项目中的踩坑与解决（持续更新）
前言最近参加了某个比赛, 我所选的赛题就是个类似知乎这样的安卓app,由于着手近一个月了,踩了不少坑,之前没怎么记录,估计事后也会忘记干净. 因此特开一帖,在此记录下相关的坑. 记录 Recycle ...
在iview + vue项目中使用自定义icon图标
最近做一个后台管理系统,是用iview+vue cli2做的,在做的过程中需要将左侧的导航栏加入icon图标,但是iview库里的图标和UI要求不符,这就需要引入自己的图标库. 1. UI设计师会把自 ...
用Thymeleaf在实际项目中遇到的坑
最近搭建了基于的springboot的新项目,抛弃了jsp,使用了官方推荐的Thymeleaf(怎么读?[taim][li:f])模板,在实际开发遇到了很多的坑,等项目告一段落,我再一一记录一下,有交 ...
【记vue项目中的踩坑日记】一杯茶一包烟，一个bug搞一天
昨天在复习B站coderwhy老师的项目时,偶然发现了一个问题,弄了半天,最后才发现问题出在哪. 封装完底部的导航栏之后实现路由跳转出现了问题,在浏览器中既不报错,也不输出内容,路由跳转也没有用整了 ...
vue+elementui项目中遇到的坑/难题
记录日常遇到的一些问题,持续更新哈,有用的话点赞收藏~ 1.Pagination 分页需求: 不需要这么多只需要展示3个但是传:pager-count="3"会报错,因为官方限 ...
create-react-app 搭建react项目中的小坑
刚买的电脑安装了 16.3的 node版本然后就装了一个 create-react-app 脚手架然后就出了个问题就是搭建react项目的时候一直报错一直报错就很奇怪后来我换了个 ...
vue 项目中使用粘性布局不起作用_做vue项目中遇到的坑总结与学习
1.出现跨域问题(已经进行跨域设置的情况下) 这个问题找了半天....最后的解决方式:查看后台支持的编码格式和前端axios发送过去的的编码格式是否一致.不一致就会出现跨域问题.至于为什么也不明白,可 ...

iview在项目中遇到的坑

iview在项目中遇到的坑相关推荐

最新文章

热门文章