树级结构转平级结构---平级结构转树级结构---根据最后一级标识查完整层级

最新推荐文章于 2024-07-22 15:13:59 发布
最新推荐文章于 2024-07-22 15:13:59 发布
阅读量1 收藏
点赞数
文章标签： vue.js elementui 前端 javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xzy__007/article/details/139936933
版权

1 树级结构转平级结构

<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: "",
      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",
                },
              ],
            },
          ],
        },
      ],
      treeLevel: [],
      customProps: {
        label: "label",
        value: "value",
        children: "children",
      },
    };
  },
  mounted() {
    this.treeConvert(this.options);
  },
  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);
        }
      });
    },
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

<style scoped lang="less">
</style>
效果图

2 平级结构转树级结构

<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: "",
      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",
                },
              ],
            },
          ],
        },
      ],
      treeLevel: [],
      customProps: {
        label: "label",
        value: "value",
        children: "children",
      },
    };
  },
  mounted() {
    this.treeConvert(this.options);
    this.options = this.treeChildren(this.treeLevel, "0");
  },
  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
    },
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

<style scoped lang="less">
</style>
效果图

3 根据最后一级标识查完整层级

  • 首先，如果绑定值只有最后一级的标识的话是可以正常回显完整层级路径的，但如果点开级联选择器下拉框会发现没有高亮指出到底最后一级是哪个，如图：

    示例图

  • 正确展示示意图：

    示例图

  • 实现代码

<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",
                },
              ],
            },
          ],
        },
      ],
      treeLevel: [],
      customProps: {
        label: "label",
        value: "value",
        children: "children",
      },
    };
  },
  mounted() {
    this.queryLevel(this.options, this.options, this.value, []);
  },
  methods: {
    // 根据最后一级标识查出完整层级
    // 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);
    },
  },
};
</script>

<style scoped lang="less">
</style>
  • 默认value绑定值是yizhi,经过方法的查询后就变成的下边的数据，展示形式也正确。
    效果图

4 完整代码(方便测试)

<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",
                },
              ],
            },
          ],
        },
      ],
      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, []);
  },
  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);
    },
  },
};
</script>

<style scoped lang="less">
</style>
许......
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app - 详细实现树形结构选择器组件（支持单选 / 多选 / 可选择父级 / 弹框形式）树形控件 tree 无限级节点树，树插件完整源码，最好用的组件教程
王佳斌
11-07 1万+
uni-app 实现无限级树形结构组件，uniapp无限树形结构，uniapp无限级树形结构组件,多选组件,支持搜索，关于vue.js:uniapp如何实现无限级树形结构组件，uniapp无限级树形结构组件，多选组件，无限树状组件的实现，uni-app官方插件，最好用的树形结构three组件树，很好用的uni-app节点树组件教程，uni-app兼容H5 app 小程序的树形节点树插件组件，UNIAPP怎么实现树形解构可展开折叠的组件。uni-app - 树形结构组件（支持展示、单选、多选、多选联动、展开折
树形结构转平铺结构，平铺结构转树形结构
m0_59324574的博客
04-25 1560
先新建一个数组 const arr = [{ pid: null, id: 1, name: '北京' }, { pid: 1, id: 11, name: '朝阳' }, { pid: 11, id: 111, name:
MySQL 高级 - 第七章 | 索引的数据结构
xhmico的博客
05-07 1308
MySQL官方对索引的定义为：索（index）是帮助MySQL高效获取数据的数据结构(有序)。在数据之外，数据库系统还维护者满足特定查找算法的数据结构，这些数据结构以某种方式引用(指向)数据，这样就可以在这些数据结构上实现高级查找算法，这种数据结构就是索引。索引的本质：索引是数据结构，可以简单理解为排好序的快速查找数据结构，满足特定查找算法，这些数据结构以某种方式指向数据，这样就可以在这些数据结构的基础上实现高级查找算法。索引是在存储引擎中实现的。
el-tree 树形结构添加层级标识
weixin_53561783的博客
05-05 460
el-tree 树形结构添加层级标识。
商业编程-源码-Ajax无限级树源码.zip
06-20
数据应包含每个节点的标识、父节点标识、以及子节点列表，以便于JavaScript解析和构建树结构。 7. **性能优化**：对于大规模的无限级树，源码可能包含了一些性能优化技术，如分页加载、缓存已加载的节点、避免不必...
大厂真题之乐信-Java高级.pdf
01-29
这种结构可以减少树的层级，提高查询速度。 设计模式 设计模式是软件设计中常用的解决方案。Spring中使用了多种设计模式，如简单工厂、单例、代理和观察者模式等。 1. 简单工厂：Spring中的BeanFactory就是简单...
Excel模板数据结构-行政区划信息.zip
06-16
- **区域ID**：唯一标识一个行政区域的编码，通常由国家、省级、市级等各级代码组成，便于计算机处理。 - **区域名称**：各级行政区域的全称，如“北京市”、“朝阳区”等。 - **父级ID**：表示当前区域的上级...
android-wheel控件实现三级联动效果
09-01
每个层级的元素都嵌套在上一级元素内，例如省份包含多个城市，城市又包含多个区县。 ```xml 安徽省"> ... ... ``` 加载这些数据后，我们需要将数据绑定到`WheelView`上。当用户在第一个`WheelView`（省份）...
行业文档-设计装置-水电工程结构分解编码方法.zip
08-28
这些代码通常包括多个层级，每一层级代表工程的不同维度，如项目、部位、结构类型等。例如，第一层级可能表示工程本身，第二层级表示大坝、厂房等主要结构，第三层级进一步细化为具体部位，如坝体、闸门等。 二、...
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
epitomizelu的专栏
07-20 1009
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 401
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
vue图片存放在public目录和src/assets目录下的区别
Zing_ing的博客
07-19 625
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
(vue3)el-table滚到底部加载数据el-table-infinite-scroll
weixin_63442947的博客
07-19 261
el-table实现。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 994
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
前端三大主流框架Vue React Angular有何不同？
2401_85955297的博客
07-21 1309
前端三大主流框架Vue React Angular比较，前端三大主流框架Vue React Angular有何不同？
VUE中的重点*
最新发布
qq_61132537的博客
07-22 895
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue的模板编译：深入理解渲染函数与预编译模板
哎 你看的博客
07-22 1042
Vue.js 是一个用于构建用户界面的渐进式框架，它的核心特性之一是其响应式和声明式的模板语法。Vue 的模板不仅仅是简单的字符串插值，它们会被编译成渲染函数，这个过程涉及到将模板字符串转换成 JavaScript 代码。本文将深入探讨 Vue 的模板编译过程，并讨论如何使用预编译模板来提高应用性能。
vue2关于Object.defineProperty实现响应式
qq_50853940的博客
07-19 315
当 Vue实例化时，会遍历`data` 选项中的属性，并使用 `Object.defineProperty` 将它们转换为 getter 和 setter。这样一来，每当访问或修改这些属性时， Vue就能捕获到这些操作，从而实现响应式更新。`Object.defineProperty` 是一个 JavaScript 的方法，它允许我们精确地添加或修改对象的属性。在 Vue 中，它用来定义每个属性的 getter 和 setter。
使用java怎么实现商品三级分类_如何实现列表三级分类---后端+前端
06-03
- parent_id：父级分类ID，用于表示当前分类的上一级分类； - level：分类级别，用于表示当前分类在树形结构中所处的层级； - sort_order：排序字段，用于表示分类在当前层级中的顺序。 通过这个表，我们可以建立起...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值