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:[]};