Vue中动态增加表单项的方法

小阳生煎

已于 2023-11-27 21:57:57 修改

阅读量1.1k

点赞数 1

分类专栏： # Ant Design Vue 后台管理文章标签： vue.js 前端 javascript

于 2023-10-30 18:14:42 首次发布

本文链接：https://blog.csdn.net/m0_53912016/article/details/134125039

版权

后台管理同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Ant Design Vue

4 篇文章 0 订阅

订阅专栏

  <!-- 需求 
  1 根据点击添加 生成表格数据 
  2 动态添加 表单
  -->

在这里插入图片描述
点击添加生成对应动态表单

在这里插入图片描述

HTML

<template>
    <div>
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
                  <a-form-model-item prop="contractNo" label="编号" style="display:flex;">
                      <a-input  v-model="form.contractNo"  :max-length="15" placeholder="请输入" />
                  </a-form-model-item>
                  <!-- 动态 -->
                  <div v-for="(item,index) in form.addArr" :key="index" style="border: 1px solid;">
                    <a-form-model-item :prop="'addArr.'+index+'.phone'" :label="`手机号${index+1}`"  :rules="{required: true, message:`请输入手机号`,trigger:'blur'}" style="display:flex;">
                      <a-input v-model="form.addArr[index].phone"  :max-length="15" placeholder="请输入" />
                  </a-form-model-item>
                  
                  <a-form-model-item  :prop="'addArr.'+index+'.status'" label="状态" style="display:flex;" :rules="{required: true, message:'请选择状态',trigger:'blur'}">
                      <a-select v-model="form.addArr[index].status" placeholder="请选择">
                          <a-select-option value="0"> 未开始 </a-select-option>
                          <a-select-option value="1"> 执行中 </a-select-option>
                          <a-select-option value="2"> 已完成 </a-select-option>
                      </a-select>
                  </a-form-model-item>
                  
                  <a-form-model-item :prop="'addArr.'+index+'.name'" label="姓名" style="display:flex;" :rules="{required: true, message:'请输入名称',trigger:'blur'}">
                      <a-input v-model="form.addArr[index].name"  :max-length="15" placeholder="请输入" />
                  </a-form-model-item>
                  <a-button type="dashed" v-if="index !== 0"  style="width: 5%;cursor: pointer;margin: 0 0 0 70%;color: rgb(97, 97, 229);" @click="delectContent(index)">删除</a-button>
                  </div>
                  <a-button type="dashed" style="width: 5%;cursor: pointer;margin: 2% 0 0 70%;color: rgb(97, 97, 229);" @click="addContent">
                          <a-icon type="plus" />添加
                      </a-button>
      </a-form-model>
      <a-button style="width: 5%;cursor: pointer;margin: 2% 0 0 70%;color: rgb(208, 57, 19);" @click="btnSubmit">提交</a-button>
    </div>
  </template>

JS

<script>
  export default {
  data(){
      return{
      form:{
        contractNo:'',
        addArr:[//默认显示一条 
          {phone:'',status:'',name:''}
        ]
      },
      rules:{//固定input
        contractNo:[{ required: true, message: "请输入编号!", trigger: "blur" }]
      }
      }
  },
 // vue实现动态添加输入框(antdv组件)
  methods:{
    addContent(){//添加
      if(this.form.addArr.length<6){
        this.form.addArr.push(
        {phone:'',status:'',name:''}
      )
      }else{
        alert('添加条数限制')
      }
     
    },
    delectContent(index){//删除
    this.form.addArr.splice(index, 1)
    },
    // 提交
    btnSubmit(){
      this.$refs.ruleForm.validate(rules => {
        if(rules){
           alert('1111111111')
        }
      })
    },
  },
  }
  </script>

 案例 
不可以单独删除表单的某一项 直接删除一行 
有ID 通过ID删除么有item 删除 找到对应的唯一值

案例


<template>
    <div>
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
                  <a-form-model-item prop="contractNo" label="编号" style="display:flex;">
                      <a-input  v-model="form.contractNo"  :max-length="15" placeholder="请输入" />
                  </a-form-model-item>
                  <!-- 动态 -->
                  <div v-for="(item,index) in form.addArr" :key="index" style="border: 1px solid;">
                    <a-form-model-item :prop="'addArr.'+index+'.phone'" :label="`手机号${index+1}`"  :rules="{required: true, message:`请输入手机号`,trigger:'blur'}" style="display:flex;">
                      <a-input v-model="form.addArr[index].phone"  :max-length="15" placeholder="请输入" />
                  </a-form-model-item>
                  
                  <a-form-model-item  :prop="'addArr.'+index+'.status'" label="状态" style="display:flex;" :rules="{required: true, message:'请选择状态',trigger:'blur'}">
                      <a-select v-model="form.addArr[index].status" placeholder="请选择">
                          <a-select-option value="0"> 未开始 </a-select-option>
                          <a-select-option value="1"> 执行中 </a-select-option>
                          <a-select-option value="2"> 已完成 </a-select-option>
                      </a-select>
                  </a-form-model-item>
                  
                  <a-form-model-item :prop="'addArr.'+index+'.name'" label="姓名" style="display:flex;" :rules="{required: true, message:'请输入名称',trigger:'blur'}">
                      <a-input v-model="form.addArr[index].name"  :max-length="15" placeholder="请输入" />
                  </a-form-model-item>
                  <a-button type="dashed" v-if="index !== 0"  style="width: 5%;cursor: pointer;margin: 0 0 0 70%;color: rgb(97, 97, 229);" @click="delectContent(index)">删除</a-button>
                  </div>
                  <a-button type="dashed" style="width: 5%;cursor: pointer;margin: 2% 0 0 70%;color: rgb(97, 97, 229);" @click="addContent">
                          <a-icon type="plus" />添加
                      </a-button>
      </a-form-model>
      <a-button style="width: 5%;cursor: pointer;margin: 2% 0 0 70%;color: rgb(208, 57, 19);" @click="btnSubmit">提交</a-button>
    </div>
  </template>
  <script>
  export default {
  data(){
      return{
      form:{
        contractNo:'',
        addArr:[//默认显示一条 
          {phone:'',status:'',name:''}
        ]
      },
      rules:{//固定input
        contractNo:[{ required: true, message: "请输入编号!", trigger: "blur" }]
      }
      }
  },
 // vue实现动态添加输入框(antdv组件)
  methods:{
    addContent(){//添加
      if(this.form.addArr.length<6){
        this.form.addArr.push(
        {phone:'',status:'',name:''}
      )
      }else{
        alert('添加条数限制')
      }
     
    },
    delectContent(index){//删除
    this.form.addArr.splice(index, 1)
    },
    // 提交
    btnSubmit(){
      this.$refs.ruleForm.validate(rules => {
        if(rules){
           alert('1111111111')
        }
      })
    },
  },
  }
  </script>
  
  <style>
  
  </style>