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

 

 

還有很多，當時沒注意記錄，現在也想不起來了。隨手記錄多重要的習慣。