最近发现下拉框多选(multiple)时,一开始进页面就会触发验证,显然是不友好的。
解决方案:
-
在校验规则里加type:"array";
-
下拉多选框绑定的变量初始值设置为[]
html多选框如下:
<el-form-item label="责 任 人" prop="chargepersonid">
<el-select multiple clearable v-model="infoForm.chargepersonid" size="small" filterable placeholder="-请选择-">
<el-option
v-for="item in Personnelname"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
对应在data中的数据结构如下:
return {
Personnelname:[],
chargepersonid:'',
rules2: {
chargepersonid: [
{type:"array",required: true, message: '请选择责任人', trigger: ['blur', 'change']}
]
}
设置初始值如下:
特别说明:
infoForm指的是form表单对应的:model的值。
chargepersonid对应的是下拉框v-model的值。