优雅新增字段在前端展示，提交后端时删除新增的key

实际开发时前端需要name，com，previewUrl去展示，但是不需要提交给后台这些字段，主要是图片字段会转成base64还有com是动态组件，发送到后端会导致存储过长

解决方案： 1.在接口获取数据时初始化数据，给数据加上name，com，previewUrl

import header1Vue from './header1.vue'
import header2Vue from './header2.vue'
import header3Vue from './header3.vue'
import header4Vue from './header4.vue'

export const topComponents = {
  header_1: {
    name: 'Header1',
    com: header1Vue,
    previewUrl: require('@/assets/preview/preview-t-1.png'),
  },
  header_2: {
    name: 'Header2',
    com: header2Vue,
    previewUrl: require('@/assets/preview/preview-t-2.png'),
  },
}


export const top = [
  {
    id: 1,
    background: {},
    inUse: 1,
    list: [],
    color: [],
    icon: [],
      },
    ],
  },
  {
    id: 2,
    background: {},
    inUse: 0,
    list: [],
    color: [],
    icon: [],
      },
    ],
  },
]

// 定义一个函数，用于将 top 数组中的对象转换为 top2 数组中的对象
export const transformTopItem = (item) => {
  const component = topComponents[`header_${item.id}`]
  return {
    ...item,
    name: component.name,
    com: component.com,
    previewUrl: component.previewUrl,
  }
}

2.在提交时去掉

// 提交时删除字段
export const deleteKey = (item) => {
  const newTop = top.map(({ name,com,previewUrl, ...rest }) => ({ ...rest }))
  top.length = 0
  top.push(...newTop)
}

看看gpt是怎么说的，不得不说gpt的帮助很强大

新增字段，这里注意不要动态去修改或再次赋值com，会导致渲染异常 删除字段 这里使用第二种方式去删除新增的key