如何合并具有相同值的行

Question

我是 Vue.js 的新手，我正在尝试合并具有相同值的行，但我的 table 没有正确显示。我被卡住了，有人能给我建议吗？

async getNetworks(audId) {
    try
    {
        const response = await this.axios.get("/s/teams/network-groupss?audId=" + audId);
            
        if (!this.networkGroups[audId])
        {
            this.$set(this.networkGroups, audId, {});
            this.$set(this.networkGroups[audId], 'isExpanded', false);
        }
            
        this.$set(this.networkGroups[audId], 'data', response.data ? response.data.data : []);
    }
        catch (error)
        {         
                console.log(error.message);
            }
        
    
}

<tbody class="network_Group">
    <tr
    v-for="(networkGroup) in networkGroups[team.id].data"
    :key="networkGroup.id"
    :class="{ odd2: index % 2 !== 0 }">
        <td
            class="text-center data-column first_row">
            <span> {{ networkGroup.source }} </span>
        </td>
        <td class="text-center data-column">
            <span> {{ networkGroup.name }} </span>
        </td>
        <td class="text-nowrap text-left breakAll">
            <span> {{ networkGroup.accountId }}</span>
        </td>
        <td class="text-center data-column">
            <span> {{ networkGroup.size }} </span>
        </td>
    </tr>
</tbody>

这是我的table： Current table 这就是我要的： Table I want

Answer 1

像下面的片段一样尝试：（您可以使用计算属性对项目进行分组，并为项目的每个组循环）

const app = Vue.createApp({
  data() {
    return {
      networkGroups: [{id: 1, source: "group A", name: "Aples", accountId: "1237", size: 9}, {id: 2, source: "group B", name: "Oranges", accountId: "0293", size: 7}, {id: 3, source: "group A", name: "Carrots", accountId: "3849", size: 1}, {id: 4, source: "group B", name: "Onions", accountId: "8172", size: 3}, {id: 5, source: "group B", name: "Mangos", accountId: "2742", size: 10}],
    };
  },
  computed: {
    groups() {
      const gr = []
      this.networkGroups.forEach(g => {
        if (!gr.includes(g.source)) gr.push(g.source)
      })
      return gr
    },
  },
  methods: {
    net(group) {
      return this.networkGroups.filter(n => n.source === group)
    }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<table>
  <tbody class="network_Group">
    <tr v-for="(gr, idx) in groups" :key="idx">
      <td class="text-center data-column first_row">
        <span> {{ gr }} </span>
      </td>
      <td>
        <table>
          <tbody class="network_Group">
            <tr
              v-for="(networkGroup) in net(gr)"
              :key="networkGroup.id"
              :class="{ odd2: index % 2 !== 0 }">
              <td class="text-center data-column">
                  <span> {{ networkGroup.name }} </span>
              </td>
              <td class="text-nowrap text-left breakAll">
                  <span> {{ networkGroup.accountId }}</span>
              </td>
              <td class="text-center data-column">
                  <span> {{ networkGroup.size }} </span>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
</div>

如何合并具有相同值的行

How to merge rows with the same value

javascript

vue.js

axios

vuejs3