vue.js - Element-Plus 表单验证中多选框为何在打开Dialog后直接弹出错误？

Question

打开dialog后直接弹出错误，反复试过之后发现只有选择框添加了多选才会有这个问题
大家有遇到这个问题，有没有大佬说下解决方法

代码

<el-dialog v-model="dialogVisible" title="添加成员" width="500px">      <el-form        ref="formRef"        :rules="rules"        :validate-on-rule-change="false"        :model="form"        label-width="80px"        @submit.prevent      >        <el-form-item label="成员角色" required prop="role">          <el-select            v-model="form.role"            multiple            collapse-tags            collapse-tags-tooltip            placeholder="请选择成员角色"            style="width: 100%"          >            <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value" />          </el-select>        </el-form-item>        <el-form-item label="微信号" required prop="username">          <el-input v-model="form.username" placeholder="请输入微信号" />        </el-form-item>        <el-form-item label="微信昵称" required prop="nickname">          <el-input v-model="form.nickname" placeholder="请输入微信昵称" />        </el-form-item>        <el-form-item label="商户列表" required prop="mer_id">          <el-select v-model="form.mer_id" placeholder="选择商户" style="width: 100%">            <el-option v-for="item in merList" :key="item.value" :label="item.label" :value="item.value" />          </el-select>        </el-form-item>        <el-form-item label="备注" required prop="remark">          <el-input v-model="form.remark" placeholder="请输入备注" />        </el-form-item>      </el-form>      <template #footer>        <span class="dialog-footer">          <el-button @click="dialogVisible = false">取 消</el-button>          <el-button type="primary" @click="submitForm(formRef)">确 定</el-button>        </span>      </template>    </el-dialog>

代码截图

效果

Answer 1

这个问题可能是由于 Element Plus 的表单验证与多选框的初始值没有正确设置导致的。在多选框（el-select 组件设置了 multiple 属性）中，v-model 绑定的值应该是一个数组，因为多选框允许用户选择多个选项。

在你的代码中，form.role 应该初始化为一个空数组 []，而不是 undefined 或 null。如果 form.role 的初始值不是数组，当表单验证规则检查这个字段时，会因为类型不匹配而触发错误。

尝试在你的 Vue 组件的 data 函数中这样初始化 form 对象：

data() {  return {    dialogVisible: false,    form: {      role: [], // 初始化为空数组      username: '',      nickname: '',      mer_id: '', // 根据你的需求，如果 mer_id 也应该是多选，则也初始化为数组 []      remark: ''    },    rules: {      // ...你的验证规则    },    roleList: [      // ...你的角色列表数据    ],    merList: [      // ...你的商户列表数据    ]  };},

确保所有多选框对应的 v-model 属性都初始化为数组。如果你的表单中有其他多选框字段，也请确保它们被正确初始化。

此外，请检查你的验证规则 rules 是否正确配置了对于多选框字段的验证。多选框字段的验证规则应该能够处理数组类型的值。

如果上述方法仍然不能解决问题，请检查你的 Element Plus 版本是否是最新的，或者查看 Element Plus 的官方文档和 issue 跟踪器，看看是否有其他人遇到了类似的问题，并找到了解决方案。