elementUI 2.x：动态增减表单项及其涉及到的表单嵌套校验

原创已于 2024-10-03 16:39:11 修改 · 760 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js

于 2023-01-30 18:27:14 首次发布

大杂烩专栏收录该内容

263 篇文章

订阅专栏

本文介绍如何在Vue中实现动态增减表单项及表单嵌套校验功能，通过实例展示了如何设置和使用表单验证规则，并提供了一段完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态增减表单项及其涉及到的表单嵌套校验

效果展示：
请添加图片描述

对于整个表单的验证，可以在el-form中使用:rules='rules’进行整体校验，而进行了嵌套的表单项可以单独给他一套校验规则，如下：
在这里插入图片描述

动态新增表单项时，为了避免出现prop取值重复，需要对prop的取值进行一些规则性改动
在这里插入图片描述

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../vue/vue.js"></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <title>动态增减表单项及其涉及到的表单嵌套校验</title>
    <style>
      .el-input__inner {
        width: 250px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <template>
        <div>
          <el-form
            :model="queryForm"
            ref="queryForm"
            label-width="100px"
            :rules="rules"
          >
            <el-form-item prop="email" label="邮箱">
              <el-input
                v-model="queryForm.email"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>

            <div v-for="(item,index) in queryForm.nameList" :key="index">
              <el-form-item
                :prop="'nameList.'+index+'.name'"
                :label="'人员姓名'+(index+1)"
                :rules="nameRules"
              >
                <el-input
                  v-model="item.name"
                  placeholder="请输入姓名"
                  style="display: inline"
                ></el-input>
                <el-button
                  @click.prevent="remove(item)"
                  style="display: inline-block"
                  >删除</el-button
                >
              </el-form-item>
            </div>

            <el-form-item>
              <el-button type="primary" @click="submitForm('queryForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('queryForm')">重置</el-button>
              <el-button @click="add">新增人员</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </div>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            queryForm: {
              email: "",
              nameList: [{ name: "", key: Date.now() }],
            },
            rules: {
              email: [
                {
                  required: true,
                  message: "请输入邮箱地址",
                  trigger: "blur",
                },
                {
                  type: "email",
                  message: "请输入合理的邮箱地址",
                  trigger: ["blur", "change"],
                },
              ],
            },
            nameRules: [
              { required: true, message: "请填写姓名", trigger: "blur" },
            ],
          };
        },
        methods: {
            
          // 表单提交
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                console.log("submit!", this.queryForm);
              } else {
                console.log("error submit!!");
                return false;
              }
            });
          },

          // 重置表单
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },

          // 添加人员
          add() {
            this.queryForm.nameList.push({
              name: "",
              key: Date.now(),
            });
          },

          // 删除人员
          remove(item) {
            var index = this.queryForm.nameList.indexOf(item);
            if (index !== -1) {
              this.queryForm.nameList.splice(index, 1);
            }
          },
        },
      });
    </script>
  </body>
</html>