ant-design-vue 1.7.8版本a-select多选模式mode表单验证不通过怎么解决？

Question

ant-design-vue 1.7.8版本a-select多选模式mode表单验证不通过怎么解决？

88147219274

表单项这样写的：

<a-form-model-item label="值班人员" prop="dutyUserIdList">
              <a-select
                mode="multiple"
                @change="
                  (val, option) => {
                    selectChange(val, option)
                  }
                "
                v-model="dutyUserIdList"
                optionFilterProp="label"
                placeholder="请选择值班人员"
                style="width: 100%"
              >
                <a-select-option v-for="(item, i) in userList" :key="i" :value="item.sysUserId" :label="item">
                  {{ item.userName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>

rules这样写的：

dutyUserIdList: [{ required: true, message: "请选择值班人员", trigger: ["change"], type: "array" }],

但是change后，有值也无法通过验证。

怎么解决这个问题，这个框架好多类似这样的问题。

前端 ant-design-vue 表单验证 form

阅读 680

AI BotBETA

回答

在 ant-design-vue 中，对于 a-select 组件在多选模式下（mode="multiple"），表单验证不通过的问题通常是由于验证规则中 trigger 的设置不正确或者组件的 v-model 绑定值类型不匹配导致的。

针对你的问题，可以尝试以下几个解决方案：

确保 v-model 绑定的值类型与验证规则中的 type 一致：
你的 v-model="dutyUserIdList" 绑定的应该是一个数组，验证规则中的 type: "array" 也是正确的。确保 dutyUserIdList 在数据初始化时就是一个数组，例如：
```
data() {
  return {
    dutyUserIdList: [], // 确保初始化为数组
    userList: [...]
  };
}
```
调整 trigger 触发方式：
对于 a-select 组件，在 mode="multiple" 时，验证触发可能需要调整为 'blur' 或 'change.blur'，因为 change 事件在 a-select 中可能不会立即触发表单验证。尝试修改验证规则中的 trigger：
```
rules: {
  dutyUserIdList: [{ required: true, message: "请选择值班人员", trigger: "blur", type: "array" }]
}
```
或者如果你使用的是较新版本的 ant-design-vue，可以尝试 'change.blur' 或 'change,blur'（注意逗号分隔）：
```
rules: {
  dutyUserIdList: [{ required: true, message: "请选择值班人员", trigger: ["change", "blur"], type: "array" }]
}
```
检查 selectChange 方法：
确保你的 selectChange 方法没有影响到 dutyUserIdList 的值，或者确保它正确地处理了数组类型的值。如果 selectChange 方法中有逻辑错误，可能会影响表单验证。
更新 ant-design-vue 版本：
如果问题依然存在，考虑是否是因为 ant-design-vue 的某个已知问题导致的。查看官方文档或 GitHub Issues，看看是否有相关的修复或工作区。如果可能，尝试升级到最新版本。