一、需求介绍

左侧一个卡片list渲染，每一条item都是一个表单对象
右侧一个表单，负责渲染左侧点击的卡片表单并记录每次修改的表单信息

二、效果

每个流程节点都有自己的独立存储空间去编辑保存

image.png image.png

三、实现

3.1、data函数中定义一个map对象

map: new Map(),

3.2、拿到表单List后的初始化

1、key值就是每个表单对象的id
2、value值就是每个表单对象
3、后续我们赋值表单数据就是根据id去map中查找对应的item对象

        // dataList是表单数组
        this.dataList.forEach((item) => {
          this.map.set(item.id, item)
        })

3.3、卡片点击事件

每次点击卡片将当前卡片的id传过来
对表单对象的form进行赋值this.form = this.map.get(id)

handleCradClick (id) {
   this.form = this.map.get(id)
},

四、总结

利用map函数可以实现为每一个item开辟一个独立的存储空间
后续方便利用id读取对应的item
这样就实现了多个表单对象公用同一个表单（表单对象）,并且每一条数据都有自己独立的存储空间（每个表单数据互不影响）