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

Question

我有一个这样的对象：

[

{"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"},

... ]

标签： arraysvue.jsgroupinglodashvuex

Answer 1

根据我从您的对象列表中可以理解的内容，您希望将您的孩子钥匙与父母联系起来。并通过循环将它们显示到模板中？

我想说处理这些数据最简单的事情：

• 在表格标签中创建一个模板以使用 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/