有 || 无父子id关联关系的树形结构数据，根据最后一级的id查完整结构

最新推荐文章于 2024-09-13 14:34:15 发布
最新推荐文章于 2024-09-13 14:34:15 发布
阅读量239 收藏 5
点赞数 10
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzy__007/article/details/141931596
版权

文章目录

1 其他相关文章

2 有父子id关联关系的树形结构数据，根据最后一级的id查完整结构

<template>
  <div class="">
    <el-cascader v-model="value" :options="options" :props="customProps" @change="handleChange"></el-cascader>
  </div>
</template>

<script>
export default {
  name: "cascader",
  data () {
    return {
      value: "yizhi",
      options: [
        {
          value: "zhinan",
          label: "指南",
          parentId: "0",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              parentId: "zhinan",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                  parentId: "shejiyuanze",
                },
                {
                  value: "fankui",
                  label: "反馈",
                  parentId: "shejiyuanze",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                  parentId: "shejiyuanze",
                },
                {
                  value: "kekong",
                  label: "可控",
                  parentId: "shejiyuanze",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              parentId: "zhinan",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                  parentId: "daohang",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                  parentId: "daohang",
                },
              ],
            },
          ],
        },
      ],
      customProps: {
        label: "label",
        value: "value",
        children: "children",
      },
    };
  },
  mounted () {
    let arr = []
    const list = this.queryLevelAll(this.options, 'yizhi', arr)
    console.log(list);
  },
  methods: {
    // 循环找到完整层级
    queryLevelAll (list, valueId, arr) {
      list.forEach(x => {
        // 如果找到了第一层级，停止循环
        if (x.parentId && x.value == valueId) {
          return arr.unshift(x.value)          
        }
        // 如果找到与 valueId  相同的，循环不停止
        if (x.children && x.children.length) {
          // 寻找当前子集下是否存在需要找的值
          const array = x.children.find(v => v.value == valueId)
          // 找到就添加，并将循环重置，需要找的值进行修改
          if (array) {
            // arr.unshift(array.value)
            // 重置循环
            this.queryLevelAll(this.options, x.value, arr)
          }
          // 继续往下循环
          this.queryLevelAll(x.children, valueId, arr)
        }
      })
      return arr
    }
  },
};
</script>

<style scoped lang="less">
</style>

3 无父子id关联关系的树形结构数据，根据最后一级的id查完整结构

<template>
  <div class="">
    <el-cascader v-model="value" :options="options" :props="customProps" @change="handleChange"></el-cascader>
  </div>
</template>

<script>
export default {
  name: "cascader",
  data () {
    return {
      value: "yizhi",
      options: [
        {
          value: "zhinan",
          label: "指南",
          parentId: "0",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
      ],
      customProps: {
        label: "label",
        value: "value",
        children: "children",
      },
    };
  },
  mounted () {
    let arr = []
    const list = this.queryLevelAll(this.options, 'yizhi', arr)
    console.log(list);
  },
  methods: {
    // 循环找到完整层级
    queryLevelAll (list, valueId, arr) {
      list.forEach(x => {
        // 如果找到了第一层级，停止循环
        if (x.parentId && x.value == valueId) {
          return arr.unshift(x.value)          
        }
        // 如果找到与 valueId  相同的，循环不停止
        if (x.children && x.children.length) {
          // 寻找当前子集下是否存在需要找的值
          const array = x.children.find(v => v.value == valueId)
          // 找到就添加，并将循环重置，需要找的值进行修改
          if (array) {
            arr.unshift(array.value)
            // 重置循环
            this.queryLevelAll(this.options, x.value, arr)
          }
          // 继续往下循环
          this.queryLevelAll(x.children, valueId, arr)
        }
      })
      return arr
    }
  },
};
</script>

<style scoped lang="less">
</style>

在这里插入图片描述

4 方法集合

  • 有父子id关联关系的树形结构数据请使用 options, 无父子id关联关系的树形结构数据请将optionsCopy数据赋值到 options中进行测试
<template>
  <div class="">
    <el-cascader v-model="value" :options="options" :props="customProps" @change="handleChange"></el-cascader>
  </div>
</template>

<script>
export default {
  name: "cascader",
  data () {
    return {
      value: "yizhi",
      options: [
        {
          value: "zhinan",
          label: "指南",
          parentId: "0",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              parentId: "zhinan",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                  parentId: "shejiyuanze",
                },
                {
                  value: "fankui",
                  label: "反馈",
                  parentId: "shejiyuanze",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                  parentId: "shejiyuanze",
                },
                {
                  value: "kekong",
                  label: "可控",
                  parentId: "shejiyuanze",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              parentId: "zhinan",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                  parentId: "daohang",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                  parentId: "daohang",
                },
              ],
            },
          ],
        },
      ],
      optionsCopy: [
        {
          value: "zhinan",
          label: "指南",
          parentId: "0",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
      ],
      newOptions: [],
      treeLevel: [],
      customProps: {
        label: "label",
        value: "value",
        children: "children",
      },
    };
  },
  mounted () {
    this.treeConvert(this.options);
    this.options = this.treeChildren(this.treeLevel, "0");
    this.queryLevel(this.options, this.options, this.value, []);
    let arr = []
    const list = this.queryLevelAll(this.options, 'yizhi', arr)
    console.log(list);
    
  },
  methods: {
    // 树转平级
    treeConvert (list) {
      list.forEach((x) => {
        this.treeLevel.push({
          value: x.value,
          label: x.label,
          parentId: x.parentId,
        });
        if (x.children && x.children.length) {
          this.treeConvert(x.children);
        }
      });
    },
    // 平转树
    // list 每次循环值 parentId第一层的父级ID(一般第一层的父级ID都是统一的)
    treeChildren (list, parentId) {
      let arr = [];
      list.forEach((item) => {
        // 是否找到了节点
        // parentId 默认为null 优先查父节点
        if (item.parentId === parentId) {
          // 找到了节点  递归循环匹配是否存在子级节点
          const children = this.treeChildren(list, item.value);
          if (children && children.length) {
            item.children = children;
          }
          arr.push(item);
        }
      });
      return arr
    },
    // 根据最后一级标识查出完整层级
    // list 每次循环值  oldList 完整的树级结构 id 最后一层的标识ID tree 容器
    queryLevel (list, oldList, id, tree) {
      list.forEach((x) => {
        if (x.value === id || x.value === id) {
          // 每次找到对应的往数组前添加一个当前层级标识
          tree.unshift(x.value);
          // 如果已经找到  则本次循环重新开始  前两个值传完整树级结构数据
          this.queryLevel(oldList, oldList, x.parentId, tree);
        }
        // 再次调用
        if (x.children && x.children.length) {
          this.queryLevel(x.children, oldList, id, tree);
        }
      });
      this.value = tree;
    },
    handleChange (value) {
      console.log(value);
    },

    // --------  上方是有父子ID关联的数据 ------------
    
    // 无父子ID关联循环找到完整层级
    queryLevelAll (list, valueId, arr) {
      list.forEach(x => {
        // 如果找到了第一层级，停止循环
        if (x.parentId && x.value == valueId) {
          return arr.unshift(x.value)          
        }
        // 如果找到与 valueId  相同的，循环不停止
        if (x.children && x.children.length) {
          // 寻找当前子集下是否存在需要找的值
          const array = x.children.find(v => v.value == valueId)
          // 找到就添加，并将循环重置，需要找的值进行修改
          if (array) {
            // arr.unshift(array.value)
            // 重置循环
            this.queryLevelAll(this.options, x.value, arr)
          }
          // 继续往下循环
          this.queryLevelAll(x.children, valueId, arr)
        }
      })
      return arr
    }
  },
};
</script>

<style scoped lang="less">
</style>
许......
关注
使用js实现将有父子关系的数据转换成树形结构数据
MySunshine07的博客
03-27 1681
1
根据id和parent_id二维树形结构数据生成嵌套树形结构数据
人生就是一场修行
11-25 2432
一、原数据 data = [ {'id': 1, 'parent_id': 0, 'name': "A"}, {'id': 2, 'parent_id': 0, 'name': "AA"}, {'id': 3, 'parent_id': 1, 'name': "AB"}, {'id': 4, 'parent_id': 3, 'name': "ABA"}, {'id': 5, 'paren...
多表之间存在父子级关系：根据某一级，查询所有子级 & 构建树结构数据（巧妙）
pscool的博客
11-16 392
表park_project、park_project_sub 、building 、building_floor 、building_floor_room 存在父子级关系，并且确定是4层，现需要。如上查询完成后，可在代码里针对查询出来的每条数据，根据当前查询的位置类型，作对应的处理。在mybatisplus中拼接上and (条件1 or 条件2 or 条件3 …
根据父子id对应关系将平铺数组处理为树形结构
高晨辉的博客
05-11 226
【代码】根据父子id对应关系将平铺数组处理为树形结构。
Java编程：将具有父子关系的数据库表数据转换为树形结构，支持无限层级
热门推荐
天将降大任于是人
01-19 2万+
在平时的开发工作中，经常遇到这样一个场景，在数据库中存储了具有父子关系的数据，需要将这些数据以树形结构的形式在界面上进行展示。本文的目的是提供了一个通用的编程模型，解决将具有父子关系的数据转换成树形结构的问题。如有不正之处，欢迎大家批评指正。编程模型我们以北京行政区划为例，讲解整个模型。北京市：市辖区 县市辖区：东城区 西城区 朝阳区 丰台区 石景山区 海淀区 门头沟区 房山区 通州区 顺义区 昌平
用递归将平行数据结构转换成树形数据结构(无id情况下)
qq_41920758的博客
04-16 827
1,测试数据 转换前 let list = [ { college: "梦想的学院", grade: "一年级", clazz: "1班", }, { college: "嗷嗷叫学院", grade: "二年级", clazz: "1班", id: "xxx", }, {
树形数据结构表ID设计
qq_35999017的博客
04-26 1027
第一种：递归表 创建父子ID两列，建立迭代关系，如下表，每行数据使用pid记录父级的id，查询时根据pid就能查到对应的下级节点。 这种方式的优点是简单易懂，插入或更新都比较简单，缺点是查询时需要递归查询，一层一层根据父节点去查找子节点。在目录数据较少时比较合适，可以读入到内存缓存使用。在数据较多时建议使用分层加载。 id pid 名称 0 0 顶层目录 1 0 第一层目录1 2 0 第一层目录2 3 1 第二层目录1 4 1 第三层目录2 第二种：左右id 设置两个
Java 将有父子关系的数据转换成树形结构数据
Charge8的博客
02-15 8737
一、数据库父子结构数据设计 大部分采用parentId的形式来存储父id，并且只存储父id，祖父Id不存储。也可以添加存储层级级别或者层级关系等字段。 CREATE TABLE `t_resource` ( `id` varchar(255) NOT NULL COMMENT '主键', `parent_id` varchar(255) DEFAULT NULL COMMEN...
js把有父子关系的数据转成树形结构
qq_44162778的博客
03-12 734
最终打印的树形数据： 代码如下： const data = [ {"id":1,"name":"四川省"}, {"id":2,"name":"绵阳市","pid":1}, {"id":3,"name":"成都市","pid":1}, {"id":4,"name":"涪城区","pid":2}, {"id":5,"name":"安州区","pid":2}, {"id":6,"name":"青羊区","pid":3}, {"id":7,"na
AngularJS实现树形结构(ztree)菜单示例代码
11-26
树形结构有多种形式和实现方式，zTree可以说得上是一种比较简洁又美观的且实现起来也相对简单。zTree是一个依靠jQuery实现的多功能“树插件”。它最大的优点是配置灵活，只要id与pid的值相同就可形成一个简单的父子...
金蝶云苍穹列表界面如何以树形结构在表格中展示业务数据
08-01
在金蝶云苍穹中，为了更好地管理和展示复杂的企业业务数据，有时需要将数据以树形结构的方式在列表界面中呈现。这种方式有助于用户直观地理解数据之间的层级关系，提高工作效率。 首先，要实现树形结构的展示，我们...
jpa单表递归树形结构实现
07-23
在数据库中，树形结构通常通过自关联来表示，即一个表的某个字段引用该表自身，形成一个层级关系。对于单表递归，这意味着所有节点都在同一张表中，通过一个父节点ID字段来标识其子节点。 创建这样的结构，我们需要...
java生成树形Excel_poi从excel中读取父子关系型（树形）数据结构到数据库
weixin_36033417的博客
02-27 2459
[上一篇写了从数据库导出excel。今天继上一篇写出从excel导入数据库。数据库表有这些字段：ID,BOOK_NAME,BOOK_AUTHOR,BOOK_PUBLISH,BOOK_DATE,BOOK_ISBN,BOOK_PAGE,BOOK_PR今天遇到一个问题，就是excel中的数据是树形的，需要读进数据库，并保存树形结构，excel结构，程序代码如下。 其中“描述“和”提升意见“只是某记录的属...
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 381
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
Vue Router push方法的使用
最新发布
ithongchou的博客
09-13 701
是一个用于编程式导航的方法，它可以将用户导航到应用中的不同路由。它提供了灵活的路由控制能力，允许你在应用的逻辑中进行路由操作，例如在用户交互后进行页面跳转。
element-plus组件问题汇总
xiaoxian_xian的博客
09-12 387
element-plus组件问题汇总
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 526
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
大文件切片上传-vue3.0
m0_56416159的博客
09-12 523
大文件切片上传（也称为分片上传）是一种处理大文件上传的有效方法，它通过将大文件分割成多个较小的部分（即切片或分片），然后分别上传这些切片到服务器，最后在服务器上将这些切片合并成原始文件。以下是关于大文件切片上传的详细步骤和注意事项。onUploadInit： 文件初始化调用接口，用于后端创建存放切片文件的文件夹。SparkMD5：生成文件唯一的hash，用来验证文件的完整性。onUploadFinish：文件上传完成验证完整性的接口。onUploadChunk：分片上传接口。基于vue3.0代码实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值