Vue2 中根据 generationType 字段组合展示数据 - 实现方法和代码示例

你可以使用Vue的计算属性来实现这个逻辑。首先，你需要定义一个计算属性来处理数据的组合展示。在计算属性中，你可以使用map()方法来遍历原始数据，并根据generationType的值进行判断和处理。\n\n下面是一个示例代码：\n\njavascript\ncomputed: {\n processedData() {\n // 遍历原始数据\n return this.data.map(item => {\n // 判断generationType的值\n if (item.generationType === '1') {\n // 多加一条数据，将conditionList的数据中的name字段拼接到该条数据中的conditionList数组中\n const combinedList = item.conditionList.flatMap(condition => {\n return this.data\n .filter(i => i.generationType === '2')\n .flatMap(i => i.conditionList.map(c => ({\n zjId: condition.zjId,\n zjName: `${condition.zjName}-${c.zjName}`\n })));\n });\n\n // 返回处理后的数据\n return {\n ...item,\n conditionList: [...item.conditionList, ...combinedList]\n };\n } else {\n return item;\n } \n });\n }\n}\n\n\n在上面的代码中，processedData是一个计算属性，它会返回处理后的数据。在计算属性中，我们使用map()方法来遍历原始数据，并根据generationType的值进行判断和处理。如果generationType的值为1，我们使用flatMap()方法来生成新的combinedList，将其他generationType为2的数据中的conditionList的数据拼接到该条数据中的conditionList数组中。最后，返回处理后的数据。\n\n你可以在Vue模板中使用processedData来展示处理后的数据：\n\nhtml\n<div v-for="item in processedData" :key="item.dimension">\n <p>dimension: {{ item.dimension }}</p>\n <p>generationType: {{ item.generationType }}</p>\n <ul>\n <li v-for="condition in item.conditionList" :key="condition.zjId">\n zjId: {{ condition.zjId }}, zjName: {{ condition.zjName }}\n </li>\n </ul>\n</div>\n\n\n在上面的模板中，我们使用v-for指令来遍历processedData中的每一项，并展示对应的字段。\n\n请注意，上面的代码仅为示例，你需要根据实际情况进行调整。