前端-不确定要显示的数据label、数量时处理并渲染数据

1.需求: 实现一个timeLIne, timeLine的内容是每个样本进行了什么操作(例如: 保存，提交，接收，拒收等), 关键点: 每种处理下要显示的内容不一样。比如:接收时: 要显示操作人、操作时间、接收原因、状态；然而提交时需要显示:操作时间、操作人、状态；

2.分析: (前提是后台没有处理数据，可能才会用上)作为前端之前渲染都是item.name、item.time等但显然这次不能这么渲染，因为我们并不知道要渲染的label都有什么，每个节点的label还不一样；所以我们需要先整理一下后台给的数据，然后以item.label、item.value渲染，就不必知道每个节点要渲染什么了。
后台给的数据(value):

timeLineData: [
        { logTypeName: '添加并接收', createUserName: 'df', createTime: '2021-06-13', status: '1', id: '1' },
        { logTypeName: '添加', createUserName: 'sd', createTime: '2021-03-13', rejectReason: '测试', status: '0', id: '2' },
        { logTypeName: '处理', createUserName: 'Dsd', createTime: '2021-12-05', status: '1', id: '3' },
        { logTypeName: '处理', createUserName: '4356', createTime: '2021-05-16', rejectReason: '数据问题', status: '0', id: '4' },
        { logTypeName: '处理', createUserName: 'Ds463d', createTime: '2021-03-30', sampleLocation: '冰箱1', status: '1', id: '5' },
        { logTypeName: '处理', createUserName: 'Dsd24', createTime: '2021-02-29', rejectReason: '23', status: '0', id: '6' }
      ],

前端需要提供的数据(label)：

arrList: [
        { id: '1', logTypeName: '操作类型', createUserName: '操作人', createTime: '操作时间', status: '状态' },
        { id: '2', logTypeName: '操作类型', createUserName: '操作人', createTime: '操作时间', rejectReason: '拒收原因', status: '状态' },
        { id: '3', logTypeName: '操作类型', createUserName: '操作人', createTime: '操作时间', status: '状态' },
        { id: '4', logTypeName: '操作类型', createUserName: '操作人', createTime: '操作时间', rejectReason: '拒收原因', status: '状态' },
        { id: '5', logTypeName: '操作类型', createUserName: '操作人', createTime: '操作时间', sampleLocation: '位置', status: '状态' },
        { id: '6', logTypeName: '处理类型', createUserName: '操作人', createTime: '操作时间', rejectReason: '拒收原因', status: '状态' }

整理后的数据格式:

list: [
  {
    id: 1,
    createTime: '2021-12-05',
    newData: [
      {
        label: '操作类型'，
        value: '添加并接收'
      },
      {
        label: '操作人',
        value: 'df'
      },
      ...
    ]
  },
  {
    id: '2',
    createTime: '2021-10-24',
    newData: [
      {
        label: '操作类型'，
        value: '添加'
      },
      {
        label: '操作人',
        value: 'sd'
      },
      ...
    ]
  },
  ...
]

3. 处理数据：

methods: {
  getDealDatas() {
    this.timeLineData.map(item => {
      const newData = []
      this.arrList.forEach(ele => {
        if (ele.id === item.id) {
          Object.entries(ele).map(([key, value]) => {
            if (key === 'id' || key === 'createTime') return
            newData.push({
              label: value,
              value: item[key]
          })
        }
      })
      return {
        id: item.id,
        createTime: item.createTime,
        list: newData
    })
  }
}