vue table数组赋值问题

  list: [
          {
            enterpriseName: '客户名',
            skuList: [{
                skuName: 'sku名',
                skuNum: 'sku数量'
              },
              {
                skuName: 'sku名1',
                skuNum: 'sku数量1'
              },
              {
                skuName: 'sku名2',
                skuNum: 'sku数量2'
              }
            ],
            collectExpenseList: [{
                expenseName: '费用名称',
                amount: '费用金额'
              },
              {
                expenseName: '费用名称1',
                amount: ''
              },
              {
                expenseName: '费用名称2',
                amount: '费用金额2'
              }
            ]
          },
          {
            enterpriseName: '客户名2',
            skuList: [{
                skuName: 'sku名111111',
                skuNum: 'sku数量'
              },
              {
                skuName: 'sku名1222222',
                skuNum: 'sku数量1'
              },
              {
                skuName: 'sku名2',
                skuNum: 'sku数量2'
              }
            ],
            collectExpenseList: [{
                expenseName: '费用名称',
                amount: '费用金额222'
              },
              {
                expenseName: '费用名称1',
                amount: '费用金额222'
              },
              {
                expenseName: '费用名称2',
                amount: '费用金额222'
              }
            ]
          },
        ],
  this.list.forEach(e => {
        this.collectExpenseList = e.collectExpenseList
        // this.costExpenseList = e.costExpenseList
      })

        <el-table-column v-for="(title,index) in collectExpenseList" :prop="title.prop" :label="title.expenseName"
          align="center" :key="title.prop" :index="title.index" :width="title.width">
          {{ title.amount }}
        </el-table-column>

目前 this.collectExpenseList 只拿到了数组最后一组的数据。应该怎么赋值才是一对一的

 this.list.forEach(e => {
        this.collectExpenseList = e.collectExpenseList
        // this.costExpenseList = e.costExpenseList
      })

你这没有循环添加获取到的只有最后的数据 你把数据push进去

this.collectExpenseList = this.list.map(e => e.collectExpenseList)

本回答自动生成，以下引用ChatGPT官方回答：

你遇到的问题是因为在循环 this.list.forEach 中，每次遍历时都会将 this.collectExpenseList 覆盖为当前循环对象的 collectExpenseList，导致最后只保留了最后一组的数据。要实现一对一的赋值，可以通过将每组的 collectExpenseList 存储在一个新的数组中，然后在模板中进行遍历显示。

在 Vue 实例中，你可以定义一个新的数组来存储 collectExpenseList，例如：

data() {
  return {
    list: [/* your list data here */],
    expenseListArray: [] // 新数组，用于存储每组 collectExpenseList
  };
},

然后在 this.list.forEach 循环中，将每组的 collectExpenseList 存储到 expenseListArray 中：

this.list.forEach(e => {
  this.expenseListArray.push(e.collectExpenseList);
});

在模板中，你可以通过嵌套两层循环来遍历显示 collectExpenseList：

<template>
  <div>
    <!-- 外层循环遍历 list -->
    <div v-for="(item, index) in list" :key="index">
      <p>{{ item.enterpriseName }}</p>
      <el-table :data="expenseListArray[index]" :key="index">
        <!-- 内层循环遍历 collectExpenseList -->
        <el-table-column
          v-for="(title, i) in item.collectExpenseList"
          :prop="title.prop"
          :label="title.expenseName"
          :key="i"
          :index="title.index"
          :width="title.width"
        >
          {{ title.amount }}
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

这样，你就可以在模板中正确显示每组 collectExpenseList 的数据，而不会只保留最后一组。

【以下回答由 GPT 生成】

问题的关键在于如何实现一对一的关系，即每个企业都显示对应的collectExpenseList数据。当前的代码只是简单地将collectExpenseList赋值为最后一个企业的数据，导致所有企业都显示相同的数据。

为了实现一对一关系，我们可以使用一个嵌套的循环来遍历this.list，并将每个企业的collectExpenseList赋值给相应的Vue对象。下面是具体的解决方案：

this.list.forEach(e => {
  e.collectExpenseList.forEach((expense, index) => {
    Vue.set(e.collectExpenseList, index, {...expense})
  })
})

在这个解决方案中，我们使用了Vue.set来更新数组中的每个元素。这样做的好处是Vue会触发响应式更新，确保每个企业的collectExpenseList都与原数组中的数据保持一致。

最后，我们可以在模板中通过嵌套的v-for指令来遍历每个企业的collectExpenseList数据：

<el-table-column v-for="(enterprise, index) in list" :label="enterprise.enterpriseName" :key="index">
  <el-table-column v-for="(expense, subIndex) in enterprise.collectExpenseList" :label="expense.expenseName" :key="subIndex">
    {{ expense.amount }}
  </el-table-column>
</el-table-column>

这样就能实现每个企业都显示自己的collectExpenseList数据了。

希望这个解决方案对你有所帮助，如果还有其他问题，请随时提问。