iview 踩坑之旅

Posted 2021-12-24 qdwz

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

 

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