VUE+ElementUi 动态表单 动态增减表单项

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