公司重構管理系統,框架定了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遠程過濾時,輸入關鍵字得到列表,刪除關鍵字時,每次刪除都會請求一次,全部刪完后不會發起請求,列表還緩存着最后一個關鍵字得到到數據。暫時沒找到比較好辦法。
好了,比較實用的都大概在這里了,后續如果有新的坑,會繼續加在這里。