iview在項目中遇到的坑

一、下拉框選中某一項搜索發現老是搜不到，最後發現是選中後選中值後邊莫名多了很長的空格，緣由很簡單，在代碼中opction閉合標籤和主體沒有在一行。

 

二、iview+vue項目中，用百分比或者display：flex彈性盒佈局，並且多層標籤下的table容易出現寬度變得很大，在加載中就像加了動畫同樣寬度在變大。要麼改變佈局，要麼將table寬度設定，如

在初始化時將寬度設爲父級寬度的多少或者其餘。

 

三、iview select 遠程搜索時，回顯後點擊搜索框再點擊其餘地方使其失去焦點則會將回顯的搜索詞清空。能夠參考光放中的setQuery屬性。（不建議或者iview的select遠程搜索自我感受不怎麼好用，能夠本身封裝一個）

 

四、使用v-if要注意，若是裏面有初始化獲取的數據，容易形成數據丟失。好比v-if中有一個select組件，當true->false->true,下拉框數據容易丟失。

 

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

 

 

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