我爱吃西瓜喵 2019-04-01 10:12 采纳率: 33.3%
浏览 2012
已采纳

多个form表单数据一修改全变了,求解

如图所示:

图片说明

<div v-for="(item,index) in items" :key="index">
   <el-form
      :inline="true"
      :model="formObj"
      class="demo-form-inline"
      size="mini"
      label-position="right"
    >     
    <el-form-item label="名称1">
        <el-select v-model="formObj.name" >
            <el-option label="A0001" ></el-option>
            <el-option label="A0002"></el-option>
        </el-select>
    </el-form-item>
     <el-form-item label="名称2">
         <el-select v-model="formObj.name2">
              <el-option label="0001"></el-option>
              <el-option label="0002" ></el-option>
          </el-select>
    </el-form-item>
    <el-form-item label="金额">
        <el-input v-model="formObj.amount"></el-input>
     </el-form-item>
     <el-form-item label="座位">
         <el-input v-model="formObj.seat"></el-input>
     </el-form-item>
    </el-form>
</div>

点击新增按钮,表单新增一行

<el-button @click="add" >新增</el-button>
data(){
    return {
      formObj: {
        bondName: "",
        etName: "",
        purchaseAmount: "",
        seat: ""
      },
      items: [],
      text: 0
    }
}
methods:{
 add: function() {
      this.items.push(this.text++);
    }
}

但是问题是,修改一行数据,所有的数据都变了,想着可以用作用域插槽,但是不知道怎么添加。。求解

展开全部

  • 写回答

3条回答 默认 最新

  • 我爱吃西瓜喵 2019-04-02 08:16
    关注
    <el-form-item label="名称1">
            <el-select v-model="modelValObj[index]" >
                <el-option label="A0001" ></el-option>
                <el-option label="A0002"></el-option>
            </el-select>
        </el-form-item>
    

    index为div循环的下标
    然后再data中定义一个modelValObj空对象来存储

    methods:{
     add: function() {
          this.modelValObj["val" + this.text++] = '';
          this.items.push(this.text++);
        }
    }
    
    

    每新增一个,就将该列新增的下标分别存进modelValObj里,以空字符串保存即可
    然后就可以神奇的实现了!

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥100 二维码被拦截如何处理
  • ¥15 怎么解决LogIn.vue中多出来的div
  • ¥15 优博讯dt50巴枪怎么提取镜像
  • ¥30 在CodBlock上用c++语言运行
  • ¥15 求C6748 IIC EEPROM程序固化烧写算法
  • ¥50 关于#php#的问题,请各位专家解答!
  • ¥15 python 3.8.0版本,安装官方库ibm_db遇到问题,提示找不到ibm_db模块。如何解决?
  • ¥15 TMUXHS4412如何防止静电,
  • ¥30 Metashape软件中如何将建模后的图像中的植被与庄稼点云删除
  • ¥20 机械振动学课后习题求解答
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部