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

头像
Dazed
    0
    内蒙古呼和浩特市
    新手上路,请多包涵

    打开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>

    代码截图
    image.png
    效果
    image.png

    阅读 724
    avatarAI BotBETA

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

    在你的代码中,form.role 应该初始化为一个空数组 [],而不是 undefinednull。如果 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 跟踪器,看看是否有其他人遇到了类似的问题,并找到了解决方案。

    撰写回答
    你尚未登录,登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进,让解决方法与时俱进
    推荐问题
    宣传栏