elementUI多选下拉框怎么验证？

弹窗组件中的多选下拉框选中了值还是提示验证失败信息，但实际上点确认验证是成功的，如下图：

页面代码

<el-form-item label="角色：" prop="roleIdList">
    <el-select v-model="editForm.roleIdList" multiple placeholder="请选择">
        <el-option v-for="item in roleData" :key="item.key" :label="item.value" :value="item.key"/>
    </el-select>
</el-form-item>

验证代码

const roleValid = function(rule, value, callback) {
    if (value.length === 0) {
        callback(new Error('角色不能为空'))
    } else {
        callback()
    }
}
addRules: {
    roleIdList: [
        { required: true, validator: roleValid }
    ]
}

还有直接不用validator，直接验证也是一样的

roleIdList: [
    { type: 'array', required: true, trigger: 'change', message: '角色不能为空' }
]

转载于：https://segmentfault.com/q/1010000022288500