使用 vuejs / vuex 使用 ID 和 ParentId 分组数组

Posted 2023-02-22

【中文标题】使用 vuejs / vuex 使用 ID 和 ParentId 分组数组

【英文标题】：Group Array with ID and ParentId with vuejs / vuex

【发布时间】：2020-08-26 16:52:10

【问题描述】：

我有一个这样的对象：

[

"id":1,"parentId":null,"name":"Parent1",

"id":2,"parentId":null,"name":"Parent2",

"id":3,"parentId":null,"name":"Parent3",

"id":4,"parentId":1,"name":"Child1Parent1",

"id":5,"parentId":1,"name":"Child2Parent1",

"id":6,"parentId":2,"name":"Child1Parent2",

"id":7,"parentId":null,"name":"Parent4"

... ]

如果存在，我必须在具有扩展子项的表中按 Id 和 ParentId 返回分组数组：

[

"id":1,"parentId":null,"name":"Parent1",

"id":4,"parentId":1,"name":"Child1Parent1",

"id":5,"parentId":1,"name":"Child2Parent1"

,

"id":2,"parentId":null,"name":"Parent2",

"id":6,"parentId":2,"name":"Child1Parent2"

,

"id":3,"parentId":null,"name":"Parent3",

... ]

【问题讨论】：

您一次只能提出一个问题。您不能将问题用作帮助您完成网站构建的在线教程。也就是说，只要您的问题是通用的（对未来有类似问题的访问者有用），我们只会回答。如果您根据您在建立网站的过程中不断改变一个问题，那只会对您有用，因此 off-topic on Stack Overflow.

好的，我会做一个新话题

【参考方案1】：

我冒昧地把@procoib 的回答更进一步，并添加了更多细节，让标记更具表现力：

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue(
  el: '#app',
  data: () => (
    items: [
       "id": 1, "parentId": null, "name": "Parent1" ,
       "id": 2, "parentId": null, "name": "Parent2" ,
       "id": 3, "parentId": null, "name": "Parent3" ,
       "id": 4, "parentId": 1, "name": "Child1Parent1" ,
       "id": 5, "parentId": 1, "name": "Child2Parent1" ,
       "id": 6, "parentId": 2, "name": "Child1Parent2" ,
       "id": 7, "parentId": null, "name": "Parent4" 
    ].map(i => ( ...i,
      expanded: true
    ))
  ),
  computed: 
    parents() 
      return this.items.filter(g => !g.parentId)
    ,
    children() 
      return this.items.filter(g => g.parentId)
    
  ,
  methods: 
    childrenOf(id) 
      return this.items.filter(g => g.parentId === id)
    
  
)

.cursor-pointer 
  cursor: pointer;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>

<div id="app">
  <table class="table table-sm">
    <thead>
      <tr>
        <th>ID</th>
        <th>parentId</th>
        <th>name</th>
      </tr>
    </thead>
    <tbody>
      <template v-for="parent in parents">
          <tr>
            <th colspan="3"
                class="bg-light">
                parent.name
                <code v-if="childrenOf(parent.id).length"
                      class="font-weight-light cursor-pointer"
                      @click="parent.expanded = !parent.expanded">[
                        parent.expanded ? 'hide' : 'show'
                      ]</code>
            </th>
          </tr>
          <tr v-for="child in childrenOf(parent.id)" v-show="parent.expanded">
            <td v-text="child.id" />
            <td v-text="child.parentId"/>
            <td v-text="child.name"/>
          </tr>
        </template>
    </tbody>
  </table>
</div>

【讨论】：

请解释这是当前问题的一部分。你一定已经跳过阅读How to Ask。

【参考方案2】：

根据我从您的对象列表中可以理解的情况，您希望将您的孩子钥匙链接到父母。并通过循环将它们显示到模板中？

我想说最简单的处理这些数据的方法：

在表格标签中创建一个模板，以使用 v-for 循环遍历每个数组，并将其标记为父级。 对 parentId 使用 v-if 来检查并确定哪个对象是父对象 在此循环内部，创建另一行并循环遍历子项 检查 parentId 以确认其为孩子，然后将 child.parentId 与 parent.id 进行比较

new Vue(
  el: "#app",
  data: 
   taskArray: [
    "id":1,"parentId":null,"name":"Parent1",
    "id":2,"parentId":null,"name":"Parent2",
    "id":3,"parentId":null,"name":"Parent3",
    "id":4,"parentId":1,"name":"Child1Parent1",
    "id":5,"parentId":1,"name":"Child2Parent1",
    "id":6,"parentId":2,"name":"Child1Parent2",
    "id":7,"parentId":null,"name":"Parent4"
 ]
  
)

#customers 
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;


#customers td, #customers th 
  border: 1px solid #ddd;
  padding: 8px;


#customers tr:hover background-color: #ddd;

#customers th 
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Grouped array</h2>

  <table id="customers">
    <template v-for="parent in taskArray">
      <tr v-if="!parent.parentId">
        <td><b> parent.name </b></td>
      </tr>
      <tr v-for="child in taskArray">
        <td v-if="child.parentId === parent.id" style="border:0px;background-color:#f2f2f2">  child.name </td>
      </tr>
    </template>
  </table>
</div>

Jsfiddle 供参考： https://jsfiddle.net/procoib/vcopwtk8/

【讨论】：

很好地使用了<template> 标签，事实上，我已经纠正了，实际上不需要分组。

@kierusek 这些答案是否解决了您最初的问题？