时间戳

首页 > 解决方案 > 鉴于它们共享相似的产品ID，如何将具有相同值的两列合并为一列？

javascript - 鉴于它们共享相似的产品ID，如何将具有相同值的两列合并为一列？

问题描述

嗨，我是 Javascript 的新手。我想将这两列合并为一列，因为它们一起共享相同的产品 ID。

我的预期结果是显示一列。但是我对如何添加检查方法来检查它们是否具有具有相同显示值的列感到困惑。

<template lang="html">

<v-data-table
:headers="headers"
:items="labels"
:loading="loading"
class="elevation-1"
 >
  <template slot="items" slot-scope="props">
   <tr>
   <td class="text-xs-left"><br>Product ID: {{props.item.product_id}}<br>Product Title: 
          {{props.item.title}}<br><br></td>
       <td class="text-xs-left">{{getMergePID(props.item.product_id)}}</td>     
      </tr> 
    </template>
   </v-data-table>
 </template>

<script>
export default {
   data () {
     return {
       loading: false,
       labels: [],
       list1: [],
       headers:[
        { text: this.$translate('product_being_promoted'),value: 
        'product_id',sortable:false },
        { text: this.$translate('name'),value: 'shop_name',sortable: false 
                }    
      ],
    }
  },
  mounted(){
   this.getProductPromoteReport();
  },
  methods: {
   getProductPromoteReport(){
   var self = this;
   this.loading = true
   axios.get("/api/merchant/live/getProductPromoteReport")
        .then(response => {
           self.labels = response.data.labels
           this.getPID(this.labels)
           this.loading = false
     })
    },
   getPID(pid){
   this.list1.length = 0
   for(var i = 0; i < pid.length; i++){
    this.list1.push([pid[i].product_id,pid[i].shop_name])
   }
 },
getMergePID(product_id){
   var temp = [];
   this.list1.forEach((item) =>
   {
      if(product_id == item[0])
      {
        temp = temp.concat([item[1]]);
      }
     })
     return temp
   },
  }
 </script>

我怎样才能只合并到一列？？？任何人都可以帮助我吗？谢谢

标签： javascriptvue.js

解决方案

根据所提供的信息，很难判断您在“名称”列下从哪里获得列表，但假设您从标签中获得“名称”作为属性---

尝试在 axios 调用后立即清理重复项

...
...
methods: {
   getProductPromoteReport(){
      this.loading = true
      axios.get("/api/merchant/live/getProductPromoteReport")
       .then(response => {
             if(response.data){
             this.labels = this.removeDuplicates(response.data.labels)
             this.loading = false
       })
       .finally(()=>this.loading = false)
    },
    removeDuplicates(labels) {
       if(!labels) return[];
       let uniqueLabels = [];
       labels.forEach((label) => {
           if(uniqueLabels.find((uniqElem)=> uniqElem.product_id== label.product_id) == null){
               uniqueLabels.push(label);
            }
        });
       return uniqueLabels 
     }
   }

然后你可以遍历标签项

<template slot="items" slot-scope="props">
  <tr>
    <td class="text-xs-left"><br>Product ID: {{props.item.product_id}}<br>Product Title: 
      {{props.item.title}}<br><br></td>
      <td class="text-xs-left">{{props.item.names}}</td>     
  </tr> 
 </template>

如前所述，不清楚的部分是“名称”的来源，所以我假设它是这样称呼的，因此 {{props.item.names}}

推荐阅读