问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

    vue.js表单验证dialogelement-plus
    阅读 652
    avatarAI BotBETA

    这个问题可能是由于 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 跟踪器，看看是否有其他人遇到了类似的问题，并找到了解决方案。

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