公司重构管理系统,框架定了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 |
|
2)全部重置:
1 |
|
2,校验表单
1)单独校验某一项:
1 |
|
2)整个表单全部校验:
1 |
|
3)表单验证整数的规则:
1 2 3 4 5 6 |
|
4) 自定义校验表单:
1 2 3 4 5 6 7 8 9 10 11 |
|
更多详细规则可以查看async-validator。
3, Table相关
某项的内容不是单纯的文本,需要显示html或者转换状态时,有二种方法。
1)在columns数组中使用render:
1 2 3 4 5 6 7 8 9 |
|
2)在columns数组中给该项添加type: ‘html‘:
1 |
|
然后在获取数据时,将特定项转换成需要的html
1 2 3 4 5 6 7 |
|
4,select相关
1 |
|
1) 给select赋初始值,仅在 filterable="true"
时有效:
1 |
|
某些版本的iview会导致下拉列表弹出,此时可以通过点击失焦,收起下拉列表:
1 |
|
2) 清空单选项,仅在 clearable="true"
时有效:
1 |
|
3)手动清空select的值:
1 |
|
select有个坑,用remote-method远程过滤时,输入关键字得到列表,删除关键字时,每次删除都会请求一次,全部删完后不会发起请求,列表还缓存着最后一个关键字得到到数据。暂时没找到比较好办法。
好了,比较实用的都大概在这里了,后续如果有新的坑,会继续加在这里。
原文地址:https://www.cnblogs.com/qdwz/p/10984298.html