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'}],

 

 

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