首页 > 其他分享 >ant-design-vue循环生成多个独立的form表单

ant-design-vue循环生成多个独立的form表单

时间:2023-03-25 19:33:48浏览次数:52  
标签:vue name form unionMember 表单 ant phone cardId

前言

后台需要的参数格式如下:

info=[{name:'',cardId:'',phone:''},{name:'',cardId:'',phone:''},{name:'',cardId:'',phone:''}]

由于后台参数的特殊性,每一行内容组成一个对象,如果这些对象都放到同一个form表单里面,由于每行对象的属性相同都是name、cardId、phone,同一个form表单无法区分,属性相同的将共享一个form值,即在【主任】的input输入【主任A 】,那么【委员】的input上也会显示【主任A 】,这样显然不对,只能设置每一行都是一个独立的form

由于form数量不确定,需要通过循环来增加,使用<a-from>写起来比较麻烦灵活性也非常差,所以后来改用<a-from-model>结合v-for,每个form的model通过对象.key值对应,具体实现如下

 

 

 代码

<a-form-model v-for="(val, key, index) in unionMember" :key="index + 'unionMemberArr'" :model="unionMember[key]">
// unionMember是一个对象,循环该对象,key值是对象的属性名
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item class="form-group" :label="index == 0 ? '主任' : '委员'" :prop="[key].name">
                  <a-input v-model="unionMember[key].name" style="margin-right:8px" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item class="form-group" label="身份证" :prop="unionMember[key].cardId">
                  <a-input v-model="unionMember[key].cardId" style="margin-right:8px" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item class="form-group" label="手机号" :prop="unionMember[key].phone">
                  <div style="display:flex">
                    <a-input v-model="unionMember[key].phone" style="margin-right:8px" />
                    <a-button v-if="index != 0" @click="unionMemberDelete(index, 'union')">删除</a-button>
                  </div>

                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
          <a-button @click="unionMemberAdd('union')">增加委员</a-button>

  

unionMember: {//data中默认存在一个主任和一个委员
        'unionMemberForm0': { name: '', cardId: '', phone: '' },
        'unionMemberForm1': { name: '', cardId: '', phone: '' }
 },

  

//在methods中
//删除委员
 unionMemberDelete (index) {
     this.$delete(this.unionMember, 'unionMemberForm' + index)

    },
//增加委员
    unionMemberAdd () {
      let len = Object.keys(this.unionMember).length
        this.$set(this.unionMember, 'unionMemberForm' + len, { name: '', cardId: '', phone: '' })
      }

  结果

可以获取值

 

标签:vue,name,form,unionMember,表单,ant,phone,cardId
From: https://www.cnblogs.com/liuXiaoDi/p/17255422.html

相关文章

  • Vue进阶(二十七):Vuex 之 getters, mapGetters, ...mapGetters详解
    一、前言Vuex提供了state状态统一管理树,开发者可以在vue中用computed计算属性接收这些公共状态以便使用。当然,也可以在接收原值的基础上对这个值做出一些改造,如:computed:{......
  • Vue——initState【十】
    前言前面我们简单的了解了vue初始化时的一些大概的流程,这里我们详细的了解下具体的内容;内容这一块主要围绕init.ts中的initState进行剖析,初始化生命周期之后紧接着。......
  • Vue介绍与生命周期详解
    一、Vue简介 Vue是一款轻量级、高性能的JavaScript框架,用于构建用户界面,它的核心是数据双向绑定和组件化。Vue的设计灵感来源于AngularJS和React,但它更加易于上手和使用......
  • 初识vue3-setup语法糖,ref和reactive语法,computde计算属性,watch开启监听
    vue3和vue2的区别1,vue3首次渲染更快(Vue3在编译和渲染性能上有了很大的提升,主要是因为使用了Proxy代理和优化算法,使得组件可以更快的渲染)2,diff算法更快3,内存占用体积......
  • vue 后台管理系统 全屏
    toggleScreen(){if(this.screen){//判断全屏状态this.$refs.components_layout_side.$el.requestFullscreen()}else{if(document.exitFullscr......
  • [FastAPI-23]响应体pydantic dict方法
    importtypingfromfastapiimportFastAPI,Responsefromfastapi.responsesimportJSONResponsefrompydanticimportBaseModelapp=FastAPI()'''pydanticd......
  • VUE 环境搭建
    一、安装node.js在node.js官网下载安装最新版的:https://nodejs.org/zh-cn/然后需要更换下载源为国内的#设置为淘宝源npmconfigsetregistryhttps://registry.npmmirro......
  • 关于Claims Transformation的问题
    原文关于ClaimsTransformation 看的有点不明白的,可以参考这篇文章的翻译:https://www.cnblogs.com/irocker/p/Ocelot-claimstransformation.html这里主要记录一下我遇到......
  • Winform/Csharp中使用StackExchange.Redis连接Redis存取数据并序列化对象/反序列化(支
    场景在winform程序中,需要连接Redis并根据Key进行模糊搜索,对value值进行反序列化为对象之后进行数据处理和显示。ServiceStack.redis这里不使用servicestack.redis,因为......
  • 排序01背包 Problem W:Proud Merchants(HDU 3466)
    ProblemWTimeLimit:2000/1000ms(Java/Other)   MemoryLimit:131072/65536K(Java/Other)TotalSubmission(s):2   AcceptedSubmission(s):1ProblemDesc......