Vue递归组件实现树结构

最新推荐文章于 2024-07-25 09:37:37 发布
最新推荐文章于 2024-07-25 09:37:37 发布
阅读量599 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000013649217
版权

1.应用场景

实现树结构，点击当前部门实现子部门的动态加载

效果：

图片描述

2.代码描述：

为了简便没有搭建Vue环境，模拟数据实现动态加载

代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div class='box'>
    <ul v-for="(item,index) in $store.state.department" :key="index">
        <tree-folder-contents :model="item"></tree-folder-contents>
    </ul>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<script type="text/javascript">
    const store = new Vuex.Store({
        state: {
            department: [
                {
                    "attribute": 0,
                    "departmentName": "产品组",
                    "deptFullName": "产品组",
                    "id": "8d3427d6eb18003ce7f3710362c718e2",
                    "leaveMessage": "",
                    "orgId": "5ce2e818-dbde-4a5d-acd0-9d69f10fafcb",
                    "parentDepart": "",
                    "parentPermission": "",
                    "permission": "",
                    "pinyin": "",
                    "showOrder": 1,
                    "totalUser": "3",
                    "wxId": "3",
                    "wxParentid": "1"
                },
                {
                    "attribute": 0,
                    "departmentName": "技术组",
                    "deptFullName": "技术组",
                    "id": "284813cd20f1b53ac5740ea019095f33",
                    "leaveMessage": "",
                    "orgId": "5ce2e818-dbde-4a5d-acd0-9d69f10fafcb",
                    "parentDepart": "",
                    "parentPermission": "",
                    "permission": "",
                    "pinyin": "",
                    "showOrder": 2,
                    "totalUser": "9",
                    "wxId": "2",
                    "wxParentid": "1"
                },
                {
                    "attribute": 0,
                    "departmentName": "事业二部",
                    "deptFullName": "事业二部",
                    "id": "783e4a3c77297585a590ca3e1441af27",
                    "leaveMessage": "",
                    "orgId": "5ce2e818-dbde-4a5d-acd0-9d69f10fafcb",
                    "parentDepart": "",
                    "parentPermission": "",
                    "permission": "",
                    "pinyin": "",
                    "showOrder": 3,
                    "totalUser": "19",
                    "wxId": "4",
                    "wxParentid": "1"
                }]
        },
        mutations: {
            add (state, o) {
                let department = state.department;
                (function fore (department, o) {
                    for (let i = 0; i < department.length; i++) {
                        if (department[i].id === o.deptId) {
                            Vue.set(department[i], 'children', o.deptlist)
                            return
                        }
                        if (department[i].children) {
                            fore(department[i].children, o)
                        }
                    }
                })(department, o)
            }
        }
    })

    Vue.component('tree-folder-contents', {
        template: '<li @click.stop="add()">\n' +
        '    {{model.departmentName}}\n' +
        '    <ul>\n' +
        '      <tree-folder v-for="(item,index) in model.children" :key="index" :model="item" v-if="model.children"></tree-folder>\n' +
        '    </ul>\n' +
        '  </li>',
        name: 'treeFolder',
        props: ['model'],
        methods: {
            add () {
                let that = this;
                let data = {
                    "deptId": "783e4a3c77297585a590ca3e1441af27",
                    "isDisplayMobilel": "0",
                    "superBigOrg": false,
                    "deptlist": [
                        {
                            "attribute": 0,
                            "departmentName": "测试一部",
                            "deptFullName": "事业二部->测试一部",
                            "id": "0266df6183cc4773873ec477bda7aefa",
                            "leaveMessage": "",
                            "orgId": "5ce2e818-dbde-4a5d-acd0-9d69f10fafcb",
                            "parentDepart": "783e4a3c77297585a590ca3e1441af27",
                            "parentPermission": "",
                            "permission": "",
                            "pinyin": "",
                            "showOrder": 0,
                            "totalUser": "3",
                            "wxId": "13",
                            "wxParentid": "4"
                        },
                        {
                            "attribute": 0,
                            "departmentName": "测试三部",
                            "deptFullName": "事业二部->测试三部",
                            "id": "05306f9c635e47fd9e2b325f431a1a50",
                            "leaveMessage": "",
                            "orgId": "5ce2e818-dbde-4a5d-acd0-9d69f10fafcb",
                            "parentDepart": "783e4a3c77297585a590ca3e1441af27",
                            "parentPermission": "",
                            "permission": "",
                            "pinyin": "",
                            "showOrder": 2,
                            "totalUser": "2",
                            "wxId": "15",
                            "wxParentid": "4"
                        },
                        {
                            "attribute": 0,
                            "departmentName": "测试总部",
                            "deptFullName": "事业二部->测试总部",
                            "id": "ded1f42dea724911a532dd757271dbaf",
                            "leaveMessage": "",
                            "orgId": "5ce2e818-dbde-4a5d-acd0-9d69f10fafcb",
                            "parentDepart": "783e4a3c77297585a590ca3e1441af27",
                            "parentPermission": "",
                            "permission": "",
                            "pinyin": "",
                            "showOrder": 3,
                            "totalUser": "0",
                            "wxId": "16",
                            "wxParentid": "4"
                        }
                    ]}
                that.$store.commit('add',data)
            }
        }
    })

    new Vue({
        el: '.box',
        store
    })
</script>
</body>
</html>

3.思路：

  1. Vuex存储组件要加载的数据
  2. 查找与之对应的父级部门id，把要添加的数据动态添加到对应父级部门的数据中
  3. vuex数据的属性添加后视图不能实时更新，要用到Vue.set()
weixin_33910434
关注
递归函数 vue 树形结构数据
qq_33843076的博客
01-06 1542
树形结构数据 递归函数 vue 数据结构 let arr = [ { name: '第一级', id:1, children: [ { name: '第二级', id:12, children: [ { name: '第三级', id:13, children:[ { name:'第四级', id:14 } ] }, ]
Vue 递归实现树形结构
weixin_34358092的博客
01-17 1596
2019独角兽企业重金招聘Python工程师标准>>> ...
vue3使用递归组件渲染层级结构
最新发布
weixin_42234899的博客
07-25 608
vue3使用递归组件渲染层级结构
vue组件的递归-树形结构
【03】的博客
07-17 1463
tree_node.vue(组件页面) <template> <ul v-if="list.length" style="margin-left: 20px;"> <li v-for="(item,index) in list" :key="index"> <p>{{item.name}}</p> <tree_node :list="item.children" v-if="item.childre
Vue 递归树
square
08-22 2630
和angularjs的ng-include可以直接插入html不同的是，在vue中需要组件的自身调用来实现递归树 调用侧代码 &lt;template&gt; &lt;div id="app"&gt; &lt;tree :model="treeData"/&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&g
vue递归组件实现树形结构
依古比古的博客
05-29 4462
vue递归组件实现树形结构 一：递归组件 什么是递归组件？简单来说就是在组件中内使用组件本身。函数自己调用自己。很多情况下我们呢刷数据的时候，不知道到底这个数据结构是有多少层，那么这个时候我们就用到了递归来实现。 二：先用for来遍历： 父组件中： <template> <div class="home"> <tree :title="list.name" :list="list.children"></tree> </div&gt
Vue2递归组件实现树形菜单
08-30
Vue2递归组件是用于构建复杂自定义布局，特别是处理层级关系数据的一种高效方式，例如在实现树形菜单时。递归组件的概念是基于组件自身能够调用自身，通过不断迭代来呈现数据结构。在本例中，我们将讨论如何利用Vue2...
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
10-18
在Vue.js中实现递归组件，需要给组件添加一个name属性，并在模板中使用自定义标签递归地引用组件本身。 示例中，我们首先定义了树形结构的数据，其中每个节点都包含一个label属性和一个可选的nodes属性。当一个节点...
vuejs使用递归组件实现树形目录的方法
10-19
本篇文章详细介绍了如何利用Vue.js的递归组件来实现树形目录结构，这种结构在展示具有层级关系的数据时非常常见。 ### 树形目录的实现原理 实现树形目录的基本思路是将每个节点看作是一个组件，如果这个节点拥有子...
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
10-17
总结起来，本文通过一个实际的开发案例介绍了如何使用Vue递归组件结合Vuex开发树形组件。递归组件的使用简化了多层级结构的渲染，而Vuex则提供了集中管理状态的能力，使得数据的动态加载和变更变得更为便捷。在实际...
vue.js树的递归
zhumengzj的博客
08-10 2348
//区域树递归 loop(item){ if (item.Children.length>0) { for (let i in item.Children) { this.loop(item.Children[i]); } item.children = item.Children; } else if(item.Children.length==0)
vuejs实现递归树型菜单组件
10-18
本篇文章主要介绍了vuejs实现递归树型菜单组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
树父节点递归获取树子节点
03-12
java实现树父节点递归获取树子节点 工具类，以后再项目中直接用即可
vue 递归菜单树
冲锋
12-06 1701
做一个后台管理系统, 很多时候是不会只有一两层这种定死的数据结构的, 往往,我们不知道它会有多少层数据, 这就需要我们来递归渲染, 而再react中我们递归个菜单就比较方便, 跟平时写递归函数差不多, 而在vue中,我们就需要递归组件了,那vue中问么递归组件呢, 其实就是依靠 组件中的name属性,这个name的值,就是当前组件自身,举个例子, <template> &...
Vue递归实现树形结构数据 - - 关系拓扑图
xzy__007的博客
05-10 424
【代码】Vue递归实现树形结构数据 - - 关系拓扑图。
Vue利用递归实现简单的目录树结构
01-24 576
日前，在工作中有一个类似chrome书签管理器的需求，在调研了iview的Tree组件，Vue-dragging，Vue-drag-tree后发现并不能满足需求，故而计划自己实现。 本文着重实现树形结构的展示，拖拽功能的完善后续会完善。 Vue作为组件化的框架，原则上所有的页面元素都由数据...
Vue--递归组件--树形
lynnshao的博客
12-19 1055
使用vue自定义了一个递归组件。 不多说，直接上代码。 纯列表展示（icon样式使用的bootstrap的glyphicon）： Vue.component('tree-list', { template: ` &amp;amp;lt;ul class=&amp;quot;tree-list&amp;quot;&amp;amp;gt; &amp;amp;lt;li v-for=&amp;quot;(i
vue3递归组件---树形组件
忧郁的蛋的专栏
12-08 2024
第二种方式 就是像vue2 一样 export一个name出去。但是setup 语法糖下没办法使用 export。App.vue 里模拟树形数据，使用递归组件。我们只需要再定义一个script标签就可以了。要注意在树形组件的里层也得添加自定义事件。并且这个自定义事件传的函数很有讲究。type.ts 属性数据的结构。
vue 递归实现树形组件
Beryl2580的博客
04-22 2653
先来看一下效果： 代码部分 （myTree.vue） 图片部分可以自己引一下自己的图片，或者使用iconfont的css引入。 <template> <div class="tree"> <ul class="ul"> <li v-for="(item,index) of treeMenu" :key...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值