动态增减表单项也是比较常用的，除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则，在一些需求下面很灵活方便。下面来看看怎么样实现动态增加，验证，删除表单项。直接上代码

 <template>
  <div>
    <el-button
      v-if="openint === false"
      icon="el-icon-thumb"
      type="primary"
      plain
      @click="Open"
    >
      点击打开动态表单
    </el-button>

    <div v-else class="box">
      <el-form :model="data" ref="data" label-width="100px">
        <div class="box_one">
          <div
            class="box_two"
            v-for="(item, index) in data.private_data"
            :key="item.key"
          >
            <div>
              <el-form-item
                label="姓名"
                :prop="'private_data.' + index + '.name'"
                :rules="{
                  required: true,
                  message: '请输入姓名',
                  trigger: ['blur', 'change'],
                }"
              >
                <el-input
                  class="inputciu"
                  v-model="item.name"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>

              <el-form-item
                label="年龄"
                :prop="'private_data.' + index + '.age'"
                :rules="{
                  required: true,
                  message: '请输入年龄',
                  trigger: ['blur', 'change'],
                }"
              >
                <el-input
                  class="inputciu"
                  v-model="item.age"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item
                label="身高"
                :prop="'private_data.' + index + '.height'"
                :rules="{
                  required: true,
                  message: '请输入身高',
                  trigger: ['blur', 'change'],
                }"
              >
                <el-input
                  class="inputciu"
                  v-model="item.height"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item
                label="班级"
                :prop="'private_data.' + index + '.shift'"
                :rules="{
                  required: true,
                  message: '请选择班级',
                  trigger: 'change',
                }"
              >
                <el-select
                  class="inputciu"
                  v-model="item.shift"
                  placeholder="请选择"
                  clearable
                >
                  <el-option label="高三一班" value="1"></el-option>
                  <el-option label="高三二班" value="2"></el-option>
                  <el-option label="高三三班" value="3"></el-option>
                  <el-option label="高三四班" value="4"></el-option>
                  <el-option label="高三五班" value="5"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <i
              v-if="data.private_data.length > 1"
              class="box_three el-icon-delete"
              @click="removeDomain(item)"
            ></i>
          </div>
        </div>
        <el-form-item class="box_four" label-width="40px">
          <span class="box_five"
            >现在有(<span>{{ quantity || "1" }}</span
            >)个最多45个</span
          >
          <el-button
            icon="el-icon-plus"
            type="primary"
            plain
            @click="addonecommodity"
          >
            新增一个选择
          </el-button>
          <el-button
            icon="el-icon-check"
            type="primary"
            plain
            @click="submit('data')"
          >
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      openint: false,
      quantity: "",
      data: {
        private_data: [
          {
            age: "",
            name: "",
            height: "",
            shift: "",
          },
        ],
      },
    };
  },

  methods: {
    // 打开
    Open() {
      this.openint = true;
    },
    // 提交
    submit(e) {
      this.$refs[e].validate((valid) => {
        if (valid) {
          console.log(this.data.private_data,'动态增加表单的数据');
          (this.data = {
            private_data: [
              {
                age: "",
                name: "",
                height: "",
                shift: "",
              },
            ],
          }),
            (this.quantity = this.data.private_data.length);
          this.openint = false;
        }
      });
    },
    // 新增一个商品
    addonecommodity() {
      if (this.data.private_data.length <= 44) {
        this.quantity = this.data.private_data.length + 1;
        this.data.private_data.push({
          age: "",
          name: "",
          height: "",
          shift: "",
        });
      } else {
        this.$message.warning("最多45个额~");
      }
    },

    // 删除 新增一个商品
    removeDomain(item) {
      const index = this.data.private_data.indexOf(item);
      if (index !== -1) {
        this.quantity = this.data.private_data.length - 1;
        this.data.private_data.splice(index, 1);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .box_one {
    max-height: 500px;
    overflow-y: auto;

    .box_two {
      width: 500px;
      padding: 10px 0 0 0;
      border-radius: 10px;
      margin: 0 10px 10px 0;
      background: #ececec;
      display: flex;
      align-items: center;
      .inputciu {
        width: 330px;
      }
      .box_three {
        font-size: 20px;
        margin: 0 0 15px 20px;
        cursor: pointer;
      }
    }
  }
  /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 3px;
    border-radius: 10px;
    background-color: #ececec;
  }

  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #b6b4b4;
  }
  .box_four {
    margin-top: 10px;
    .box_five {
      margin-right: 10px;
      span {
        color: red;
      }
    }
  }
}
</style>

看完如果觉得对你有所帮助请作者大大一个关注吧！！！