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

好了，比较实用的都大概在这里了，后续如果有新的坑，会继续加在这里。

最新文章

  1. php的基础
  2. Xamarin android 之Activity详解
  3. ETL利器Kettle实战应用解析系列二 【应用场景和实战DEMO下载】
  4. 大话设计模式C++版——代理模式
  5. coffeescript 1.8.0 documents
  6. 在阿里云主机的Debian操作系统上安装Docker
  7. How to use Ubuntu Linux in virtual box
  8. 项目源码--Android美图秀秀源码
  9. Sublime Text 2 实用快捷键[Mac OS X]
  10. JVM内存划分基础知识
  11. android学习笔记WebView的基本使用
  12. 201521123003《Java程序设计》第7周学习总结
  13. Oracle Sequence创建与使用
  14. vue keep-alive 取消某个页面缓存问题
  15. ArcGis 拓扑检查——缺顶点、悬挂检查代码 C#
  16. SharePoint2016配置工作流开发环境
  17. ROCKETMQ——2主2从集群部署
  18. [转载]AngularJS视图
  19. linux中set的用法
  20. js正则表达式----replace

热门文章

  1. 各大厂RTSP取流的URI
  2. python中使用自定义类实例作为字典的key
  3. android愤怒小鸟游戏、自定义View、掌上餐厅App、OpenGL自定义气泡、抖音电影滤镜效果等源码
  4. Spring Boot: Jdbc javax.net.ssl.SSLException: closing inbound before receiving peer&#39;s close_notify
  5. 学会使用数据讲故事——Excel研究网络研讨会
  6. python易错知识集合
  7. mysql 事务处理 （转）
  8. FFT算法的verilog实现
  9. 三步教你实现MyEclipse的debug远程调试
  10. Python中为什么可以通过bin(n &amp; 0xffffffff)来获得负数的补码？