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

Question

表单项这样写的：

<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后，有值也无法通过验证。

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

Answer 1

找到问题了，是v-model的书写问题。应该写form.dutyUserIdList。

Answer 2

回答

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

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

1. 确保 v-model 绑定的值类型与验证规则中的 type 一致：
   你的 v-model="dutyUserIdList" 绑定的应该是一个数组，验证规则中的 type: "array" 也是正确的。确保 dutyUserIdList 在数据初始化时就是一个数组，例如：

   data() {
     return {
       dutyUserIdList: [], // 确保初始化为数组
       userList: [...]
     };
   }

2. 调整 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" }]
   }

3. 检查 selectChange 方法：
   确保你的 selectChange 方法没有影响到 dutyUserIdList 的值，或者确保它正确地处理了数组类型的值。如果 selectChange 方法中有逻辑错误，可能会影响表单验证。
4. 更新 ant-design-vue 版本：
   如果问题依然存在，考虑是否是因为 ant-design-vue 的某个已知问题导致的。查看官方文档或 GitHub Issues，看看是否有相关的修复或工作区。如果可能，尝试升级到最新版本。

通过上述步骤，你应该能够解决 a-select 多选模式下表单验证不通过的问题。如果问题仍然存在，建议详细检查控制台是否有错误信息，或者提供更详细的代码和错误信息以便进一步分析。