合并数组，去除数组中的某个属性

原创已于 2024-12-25 11:24:33 修改 · 564 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2023-09-21 10:48:25 首次发布

本文讲述了在项目开发中，如何将后端返回的三个固定标题数组与动态数据合并，使用扩展运算符并在表格中根据index属性显示标题和内容的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.合并数组

在项目开发过程中，有一个需求，需要制作一个带有标题的表格，如下所示：

在js处理中，首先对后端返回的json数据进行处理，然后判断后端返回的数组是否存在，最后对数组进行合并。为数组中的标题元素添加index属性，然后在列表中根据index是否有值判断该行是否为标题。

  this.confirmSlip = JSON.parse(res.data.confirmSlip)
  if (!this.confirmSlip.infoList1) {
    this.confirmSlip.infoList1 = []
  }
  if (!this.confirmSlip.infoList2) {
    this.confirmSlip.infoList2 = []
  }
  if (!this.confirmSlip.infoList3) {
    this.confirmSlip.infoList = []
  }

  this.infoList = [
    { title: '发布审核单', index: '1' },
    ...this.confirmSlip.infoList1,
    { title: '版本发布', index: '2' },
    ...this.confirmSlip.infoList2,
    { title: '环境组', index: '3' },
    ...this.confirmSlip.infoList3,
  ]

2.剔除数组中的某个属性

需求是选中表格的数据时，剔除数组的审核状态，然后把列表的整个数组全部传给后端，所以处理如下：

//执行审批操作
examineData(data) {
    let reqObj = map.examineData
    if (!reqObj) return

    let params = data.map(e => {
        const { approvalStatus, ...rest } = e
        return rest
    })

    this.axios[reqObj.type](reqObj.url, params).then(xxxxx)
}