iview 踩坑之旅


公司重構管理系統,框架定了vue,UI在element和iview之間選,element樣式被吐槽丑,於是選了iview,但是,,這個坑多啊。。。

廢話少說,羅列了iview中容易出錯或者懵逼的一些地方,希望后來的老哥們少費點頭發。

#環境:vue-2.5, iview-3.0.1#

避免你浪費時間,先列出要點:

1,重置表單;

2,校驗表單;

3,  Table相關;

4,select相關。

 

1,重置表單

1)單獨重置某一項:

1
2
3
4
5
this .$refs[name].fields.forEach( function  (e) {
       if  (e.prop ==  'abc' ) {
           e.resetField()
       }
})

2)全部重置:

1
this .$refs[name].resetFields();

 

2,校驗表單

1)單獨校驗某一項:

1
this .$refs[ 'formAdd' ].validateField( 'xxx' );

2)整個表單全部校驗:

1
this .$refs[name].validate(callback);

3)表單驗證整數的規則:

1
2
3
4
5
6
ruleValidate: {
     day: [
           { required:  true , message:  '請輸入,必填' , trigger:  'blur'  },
           { type:  'integer' , min: 0, max: 60, message:  '必須是介於0和60之間的整數' , trigger:  'blur' , transform: value => +value }
         ]
} 

4)  自定義校驗表單:

1
2
3
4
5
6
7
8
9
10
11
const validateTest = (rule, value, callback) => {
       if  (value.length === 0) {
         return  callback( new  Error( '請選擇,必選' ));
       }
       callback();
     };
 
// 在驗證規則ruleValidate里添加
test: [
           {required:  true , validator: validateTest, trigger:  "blur" }
       ]

更多詳細規則可以查看async-validator

 

3,  Table相關

某項的內容不是單純的文本,需要顯示html或者轉換狀態時,有二種方法。

1)在columns數組中使用render:

1
2
3
4
5
6
7
8
9
{ title:  '狀態' ,
           align:  'left' ,
           key:  'status' ,
           render: (h, params) => {
             let  type = params.row.status;
             if  (type === 1)  return  h( 'div' 'ok' );
             return  h( 'div' '不ok' );
           }
   }

2)在columns數組中給該項添加type: 'html':

1
{ title:  'banner' , align:  'center' , key:  'banner' ,  type:  'html'  } 
    然后在獲取數據時,將特定項轉換成需要的html

 

1
2
3
4
5
6
7
list.map(item => {
         let  str =  '' ;
         item.content.map(i => {
           str +=  '<p>'  '+ i.title + ' </p>';
         });
         item.content = str;
      });

  

4,select相關

1
<Select ref= "select" ></Select>

1) 給select賦初始值,僅在 filterable="true" 時有效:

1
this .$refs.select.setQuery( 'abc' );

  某些版本的iview會導致下拉列表彈出,此時可以通過點擊失焦,收起下拉列表:

1
this .$refs.tables.$el.click();

2) 清空單選項,僅在 clearable="true" 時有效:

1
this .$refs.select.clearSingleSelect();

3)手動清空select的值:

1
this .$refs.select.query =  ''

 select有個坑,用remote-method遠程過濾時,輸入關鍵字得到列表,刪除關鍵字時,每次刪除都會請求一次,全部刪完后不會發起請求,列表還緩存着最后一個關鍵字得到到數據。暫時沒找到比較好辦法。

 

好了,比較實用的都大概在這里了,后續如果有新的坑,會繼續加在這里。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM