列转树--笨方法

最新推荐文章于 2025-11-25 08:50:12 发布

原创最新推荐文章于 2025-11-25 08:50:12 发布 · 960 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#linq #javascript #microsoft

这篇博客详细介绍了如何在Vue组件中使用Linq.js库来过滤和处理数据，构建树形结构。首先，通过Linq.js从数据源`treeData`中筛选出根节点，然后将每个节点转换为包含`Id`、`Name`和空`children`数组的对象。接着，遍历数据源，为每个节点添加子节点，形成层级结构。最后，对树形结构进行二次遍历，添加孙子节点，完成整个树的构建过程。

<template>
  <div class="tree">
    <pre>{{ filterTreeFirst }}</pre>
  </div>
</template>

<script>
import treeData from "../../testData";
import enumerable from "linq";

export default {
  name: "Tree",
  data() {
    return {
      filterTreeFirst: [],
      filterTreeSecond: []
    }
  },
  created() {
    this.filterTreeFirst = enumerable.from(treeData).toArray()
    this.filterTreeFirst = enumerable.from(this.filterTreeFirst).where(item => item.Pid == undefined || item.Pid == ''
        || item.Pid == null).toArray()
    this.filterTreeFirst = enumerable.from(this.filterTreeFirst).select(item => ({
      Id: item.Id,
      Name: item.Name,
      children: []
    })).toArray()


    this.filterTreeFirst.forEach(para => {
      treeData.forEach(item => {
        if (item.Pid == para.Id) {
          let obj = {
            Pid:item.Pid,
            Id: item.Id,
            Name: item.Name,
            children: [],

          }
          para.children.push(obj)
        }
      })
    })

    this.filterTreeFirst.forEach(iii => {
      if (iii.children.length > 0) {
        iii.children.forEach(paras => {
          treeData.forEach(item => {
            if (paras.Id == item.Pid) {
              console.log(item)
              let obj = {
                Pid: item.Pid,
                Id: item.Id,
                Name: item.Name,
                // children: []
              }
              paras.children.push(obj)
            }
          })
        })
      }
    })

}}
</script>

<style scoped>

</style>