map函数的应用（项目实战）

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-02-28 11:48 被阅读0次

一、需求介绍

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

二、效果

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

image.png

map: new Map(),

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

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

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

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

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

本文标题：map函数的应用（项目实战）

本文链接：https://www.haomeiwen.com/subject/avhlldtx.html