使用 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"},

... ]

Answer 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>

Answer 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/