公司重构管理系统，框架定了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远程过滤时，输入关键字得到列表，删除关键字时，每次删除都会请求一次，全部删完后不会发起请求，列表还缓存着最后一个关键字得到到数据。暂时没找到比较好办法。
好了，比较实用的都大概在这里了，后续如果有新的坑，会继续加在这里。