使用iview的select组件配合Form表单验证时，验证不通过

一、问题重现

如上图，实际上已经选择了，但是还是有校验不通过的错误提示

二、问题分析

首先了解一下iview的校验库规定的校验规则，如下图：

从上面的规则中可以看出，如果我们不添加type来限定类型，则默认类型就是 string，但是一般的需求是option的value都是类似于id这种唯一标识，所以有可能会出现number/string。可恶的是有时候我们即使指定了type: ‘string’，依然校验不过，接着看文档说明，文档中还针对校验字段转换的做了说明，就是针对transform属性的说明，如下图：

• 第一部分是说，有时有必要在校验前转换值，可能是强制该值或以某种方式对其进行处理。因此需要在校验规则中添加一个转换函数。在校验之前对属性进行转换，并将其重新分配给源对象，以更改现有属性的值。
• 第二部分是说，如果没有转换函数，校验时将会由于模式不匹配而失败，因为输入的内容包含前置行距和尾空格，但是通过添加转换函数，校验会便通过，同时字段值会被清除。

三、问题解决

糙代码一坨：

<template>
	<div>
		 <Form :model="supplier" :rules="rule" :label-width="120" ref="supplierForm">
		 	<FormItem label="支撑区域：" prop="supportAreaCodes">
			    <Select v-model="supplier.supportAreaCodes" multiple>
			        <Option v-for="item in supportAreaCodeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
			    </Select>
			</FormItem>
			...
		 </Form>
		 ...
	</div>
</template>

<script>
	export default {
	    data() {
	        return {
				// ...... 千言万语，就不写了
	            rule: {
	            	// transform: (value) => String(value) 是重点
					supportAreaCodes: [{transform: (value) => String(value),required: true, message: '不能为空！', trigger: 'blur'}]
				}
	        }
	    }
	}
</script>	

如下图，转换后，可以正常校验了：

四、总结

问题不大，但是不得不说，个人不太喜欢iview这个库，个人觉得文档还不够清晰，不建议一些页面数据加载较多且响应速度要求较高的项目使用，实际上一些细节处理的也并不优雅，不要问为什么，想知道为什么，就先熟练使用它！！！