vue-element-ui下拉多选验证问题

最近做项目时，发现刚打开弹框就出现了下拉多选的验证，如下图：

 

 

 经过网上搜索，找到了两种解决方案

第一种解决办法：

personnelDescription: [
                        {type:"array",required: true, message: '请输入', trigger: ['blur', 'change']}
                    ],

 

this.ruleFormAdd = {personnelDescription:[]};

 第一种解决方案总结为两点即：1.在校验规则里加type："array";2.下拉多选框绑定的变量初始值设置为[].

下面接着说第二种解决方案：

就是将验证规则改为自定义的validator验证，同样需要设置绑定的变量为[]

如下：

1 personnelDescription: [
2                         { required: true, validator: personnelDescriptionValid }
3                         //{type:"array",required: true, message: '请输入', trigger: ['blur', 'change']}
4                     ],

1 const personnelDescriptionValid = function(rule, value, callback) {
2                 if (value.length === 0) {
3                     callback(new Error('人员配置不能为空'))
4                 } else {
5                     callback()
6                 }
7             }

this.ruleFormAdd = {personnelDescription:[]};