vue 递归处理树形数据

88岁偷懒被抓

已于 2022-11-04 15:04:28 修改

阅读量536

点赞数

文章标签： vue.js 前端 javascript

于 2022-11-04 11:56:04 首次发布

本文链接：https://blog.csdn.net/newbaby123/article/details/127686211

版权

filterTree (list) {
      list.forEach((item) => {
        if (!item.children || item.children.length < 1) {
          delete item.children
        } else {
          this.filterTree(item.children)
        }
      })
    },

优惠劵

88岁偷懒被抓

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue 递归处理树形数据

【代码】vue 递归处理树形数据。
复制链接

扫一扫

vue.js与element-ui实现菜单树形结构的解决方法

12-11

由于业务需要，要求实现树形菜单，且菜单数据由后台返回，在网上找了几篇文章，看下来总算有了解决办法。场景：根据业务要求，需要实现活动的树形菜单，菜单数据由后台返回，最后的效果图如下：后台返回的数据格式是这个样子的： data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID 　　　　　　　　　　　　　　isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', 　　　　　　　　　　　　　　isContent:false }, { pID:'m1', name:

递归遍历树结构数据（js，vue）

weixin_45776308的博客

01-12

4432

【代码】递归遍历树结构数据（js）

参与评论您还未登录，请先登录后发表或查看评论

VUE2.0——树形结构数据(递归组件)

HarryHY的博客

11-24

2572

父组件 newstree组件是一个循环递归的子组件这里有一个itemChild是数据结构需要递归的数据 deep这个是递归的深度 ref是父组件触发子组件所用我这里可能有不同的层级的子组件所以不是单一的所以是个动态的 <div class="replay_child"> <newstree :itemChild="item.child" v-if="ite

【Vue3】element-plus中el-tree的递归处理赋值回显问题

Write less，do more

02-10

5347

整体思路很简单：初始化树 -> 处理 el-tree 回显 -> 递归处理所有层级菜单选中的id。在下次进入编辑页面时，需要将当前选中租户的权限回显出来。只要勾选一个子节点，回来接收到的父节点数据。说明：二级下面会有多个三级菜单，以此类推。所以涉及到了权限管理和菜单管理。会显示，会显示所有子节点数据。由于项目是从0-1开始构建的。rbac都需要重新构建对接。一级菜单包含多个二级菜单。

vue递归生成树状结构

weixin_61570458的博客

02-15

1947

【代码】vue递归生成树状结构。

Vue递归实现树形菜单方法实例

12-12

什么是树形菜单还是要简单的啰嗦一下，比如：上图是截图自elementui的实例，实现方式是用文档结构（类似像原生Dom文档结构的写法）的方式，好处就是很灵活，可以方便的自定义，作为一个通用视图组件库这是正确的...

Vue 实现树形视图数据功能

08-27

主要介绍了Vue 实现树形视图数据功能,利用简单的树形视图实现的，在实现过程中熟悉了组件的递归使用，感兴趣的朋友跟随脚本之家小编一起学习吧

vue实现的树形结构加多选框示例

10-17

主要介绍了vue实现的树形结构加多选框,结合实例形式分析了在之前递归组件实现vue树形结构的基础之上再加上多选框功能相关操作技巧,需要的朋友可以参考下

vue用递归组件写树形控件的实例代码

12-10

最近在vue项目中遇到需要用树形控件的部分，比如导航目录是不确定的，所以必须要用树形结构，不管导航目录有几级，都可以自动显示出来，我一开始觉得element-ui有树形控件，不需要自己写，调用就可以了，后来才发现...

vue+elementUi——递归的方式处理数据形成树形结构

yehaocheng520的博客

08-20

4034

最近在写后台管理系统时，遇到了一个树形结构的要求，效果图如下：树形结构我是第一次用到，之前写的不是很多。因此看了一下文档，发现要实现树形结构，需要保证的数据结构如下：后台返回的原始数据结构如下：后台返回的数据都是对象数组，并没有根据父子级进行展示，需要自行判断处理，数据逻辑是：parentID=0的是父级，parentID不为0的，如果parentID与某个对象中的id相等，则表示为该对象的子级。此时则需要用到递归。数据处理代码如下： function initTree({ pid, pid

VUE+树状图数据格式递归遍历获取参数

Horses丶浩的博客

12-02

3117

因为当时碰到的项目，需要有个添加菜单，点击的时候获取id，然后使用假数据添加到菜单下面。但是，当取消的时候，因为树状图层级不一致，不好删除。于是采用递归的方式，找到相应的id，进行删除 ...

vue 递归处理tree结构

qq_43557395的博客

03-07

725

<el-tree :data="treeMenuData" ref="treeRef" :props="defaultProps" highlight-current node-key="id" default-expand-all /> "result": [ { "tmSonTask": { "id": "18a4f244224943cb98ad67bd48874edf", "title": "NN

Ant Design Vue详解a-tree-select使用树形选择器，递归渲染数据，点击选项回显，一二级菜单是否可选等问题

最新发布

博客之家

01-24

2070

【代码】Ant Design Vue详解a-tree-select使用树形选择器，递归渲染数据，点击选项回显，一二级菜单是否可选等问题。

vue路由-两个树形结构数据-递归处理方法

李特成的博客

09-15

838

【代码】vue路由-两个树形结构数据-递归处理方法。

Vue 中如何处理树形结构数据渲染与操作？

徐师兄的博客

06-09

2711

在 Vue 中，处理树形结构数据的渲染和操作可以使用递归组件、第三方组件库、搜索和筛选等方式。递归组件可以实现无限级别的嵌套，第三方组件库可以提高开发效率，搜索和筛选可以让用户快速地找到目标节点。在实际开发中，我们需要根据具体的业务需求来选择合适的方式来处理树形结构数据。

Vue3+ElementPlus el-tree递归获取当前选中节点的所有子节点ID （适用所有场景）

朝花夕拾的博客

07-13

4503

然后说下选中当前节点去获取其节点下的所有子节点的ID问题，网上搜了许多没有合适自己的方法，项目需求是单选，用了父子不关联的方法实现的单选，需要做下控制就是父节点不允许点击的情况下的子节点也不允许点击，这个时候就需要递归算法解决此问题，（递归算法适用所有场景下的获取子节点的数据）第一个参数为ture表示获取子节点下的数据，由于父子不关联，所以取值为空数组。官方提供了这个方法获取选中节点的数组可以方便我们进行递归实现。设置选中节点后去递归获取选中节点的所有子节点的数据。

给树形数据每层添加属性

lllnana

09-18

191

调用函数传入数据，获取到处理好的数据。

vue项目中使用el-tree — 回显问题

otatoz

09-10

5183

最近实现了一个项目需求，关于权限的处理，见下图一级菜单包含多个二级菜单若二级不全选，则一级显示半选状态若二级全选中，则一级显示全选状态在下次进入编辑页面时，需要将当前选中租户的权限回显出来说明：二级下面会有多个三级菜单，以此类推整体思路很简单：初始化树 -> 递归处理所有层级菜单选中的id -> 处理 el-tree 回显初始化树 ...

vue.js中iview中使用树形结构回显问题

m0_38081413的博客

08-08

1197

在使用iview的tree组件的时候，当要回显时，tree中的选中功能，如果先取消，然后再选中，这无法显示再选中的样式。如要解决此问题，要从新定义一个数组，用这个数组来对要展示的数据做相应的处理，然后再把这个数组从新赋值给对tree的data，而不是先对data赋值，然后对其结构中的数据在改变。具体代码如下： <Tree class="fz14" ref="caseTree" :data="caseLists" show-checkbox :multiple="true" @on-check...

vue 递归树形带复选框

09-03

Vue递归树形带复选框的实现可以通过以下步骤进行： 1. 首先，创建一个Vue组件来表示树形结构的节点。在该组件中，使用递归方式在模板中嵌套该组件自身，以实现树形结构。 ```html <template> <div>  <input type="checkbox" v-model="checked" @change="handleChange"/> {{ node.name }} <div v-if="node.children">  <tree-node v-for="child in node.children" :key="child.id" :node="child"></tree-node> </div> </div> </template> <script> export default { props: { node: { type: Object, required: true } }, data() { return { checked: false } }, methods: { handleChange() { // 复选框状态改变时，操作节点的选中状态 this.node.checked = this.checked; } } } </script> ``` 2. 在父组件中加载树形组件，并传递树形结构的数据作为props。 ```html <template> <div> <tree-node :node="treeData"></tree-node> </div> </template> <script> import TreeNode from './TreeNode.vue'; export default { components: { TreeNode }, data() { return { treeData: { id: 1, name: 'Root', children: [ { id: 2, name: 'Child 1', children: [ { id: 3, name: 'Subchild 1' }, { id: 4, name: 'Subchild 2' } ] }, { id: 5, name: 'Child 2', children: [ { id: 6, name: 'Subchild 3' } ] } ] } }; } } </script> ``` 在以上代码中，我们使用递归的方式将树形结构中的每个节点都生成一个TreeNode组件，并将对应节点的数据作为props传递给子组件。在TreeNode组件中，使用v-model绑定复选框的选中状态，当复选框的状态改变时，也改变节点的选中状态。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交