Vue2显示动态添加表单-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue2显示动态添加表单。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<template>
  <div class="container">
    <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="80px">
      <!-- 固定项目 -->
      <el-form-item label="学生姓名" prop="name">
        <el-input v-model="form.name" palceholder="请输入姓名">
        </el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="form.phone" palceholder="请输入电话">
        </el-input>
      </el-form-item>
      <!-- 动态增加项目 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="动态增加">
            <el-button type="primary" size="mini" @click="addItem()" icon="el-icon-plus"></el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-for="(item, index) in form.dynamic" :key="index" style="border-bottom: 1px dashed #909399; margin-bottom: 25px;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="学生姓名" :prop="'dynamic.' + index + '.name'"
                          :rules="{required: true, message: '姓名不能为空', trigger: 'blur'}">
              <el-input v-model="item.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学生性别" :prop="'dynamic.' + index + '.gender'">
              <el-input v-model="item.gender"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="学生年龄" :prop="'dynamic.' + index + '.age'">
              <el-input v-model="item.age"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" :prop="'dynamic.' + index + '.phone'"
                          :rules="[{required: true, message: '手机号不能为空', trigger: 'blur'},{ pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }]">
              <el-input v-model="item.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="danger" icon="el-icon-delete" @click="deleteItem(item)" size="small"></el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'dynamic',
  data() {
    return {
      form: {
        name: null,
        phone: null,
        dynamic: [],
      },
      rules: {
        name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
        phone: [
          {required: true, message: '请输入电话', trigger: 'blur'},
          {pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码'}
        ]
      }
    }
  },
  methods: {
    addItem() {
      this.form.dynamic.push({})
    },
    deleteItem(item) {
      this.form.dynamic.splice(index, 1)
      let index = this.form.dynamic.indexOf(item)
      if (index !== -1) {
        this.form.dynamic.splice(index, 1)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 80%;
  height: 80%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>

提交方法：

/** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const form = Object.assign({}, this.form);
          form.website = JSON.stringify(this.form.website)
          form.system = JSON.stringify(Object.assign({}, this.systemJson))
          form.hardware = JSON.stringify(Object.assign({}, this.hardwareJson))
          if (this.form.wid != null) {
            updateOwner(form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addOwner(form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

文章来源地址https://www.toymoban.com/news/detail-706011.html

到了这里，关于Vue2显示动态添加表单的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！