VUE递归树形目录（vue递归组件）的使用

最新推荐文章于 2022-06-12 14:42:49 发布
最新推荐文章于 2022-06-12 14:42:49 发布
阅读量220 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Amaris-Lin/p/8258561.html
版权

1、html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script src="js/vue.js"></script>
</head>
<body>
　　　　<!-- 递归模板 -->
        <template id="diguiTempTest">
            <li>
                 <div :class="{bold: isFolder}">
                      {{model.data.menuName}}
                </div>
                
                <ul v-if="isFolder">
                    <item class="item" :model="test" v-for="test in model.childTreeNode"> </item>
                </ul>
                
            </li>
        </template>
</div>
<h1>递归组件测试</h1>
<div id="diguiTest">
    <ul v-for="model in message"> 
        <item class="item" :model="model"></item>
    </ul>
</div>

<input type="button"  value="更改" onclick="test6666()"/>
</body>
</html>

2、js

<script type="text/javascript">
    
Vue.component('item', {
  template: '#diguiTempTest',
  props: ['model'],
  computed: {
    isFolder: function () {
        if(this.model.childTreeNode.length == 0) {
            return false;
        }else {
            return true;
        }
    }
  }
})
 
var vm = new Vue({
        el : "#diguiTest",
        data : {
            message : [{
                "id": "1",
                "data": {
                    "menuName": "项目管理",
                    "menuCode": "",
                },
                "childTreeNode": [{
                    "data": {
                        "menuName": "项目",
                        "menuCode": "BusProject",
                    },
                    "childTreeNode": []
                }, {
                    "data": {
                        "menuName": "我的任务",
                        "menuCode": "BusProject",
                    },
                    "childTreeNode": []
                }, {
                    "data": {
                        "menuName": "人员周报",
                        "menuCode": "BusProject",
                    },
                    "childTreeNode": []
                }]
            }, {
                "id": "2",
                "data": {
                    "menuName": "数据统计",
                    "menuCode": "BusClock",
                },
                "childTreeNode": []
            }, {
                "id": "3",
                "data": {
                    "menuName": "人事管理",
                    "menuCode": "",
                },
                "childTreeNode": []
            }, {
                "id": "4",
                "data": {
                    "menuName": "基础管理",
                    "menuCode": "",
                },
                "childTreeNode": []
            }]
        },

    })
    
    function test6666() {
        var data = [{
                "id": "1",
                "data": {
                    "menuName": "项目管理6966",
                    "menuCode": "",
                },
                "childTreeNode": [{
                    "data": {
                        "menuName": "项目666",
                        "menuCode": "BusProject",
                    },
                    "childTreeNode": []
                }, {
                    "data": {
                        "menuName": "我的任务",
                        "menuCode": "BusProject",
                    },
                    "childTreeNode": []
                }, {
                    "data": {
                        "menuName": "人员周报",
                        "menuCode": "BusProject",
                    },
                    "childTreeNode": []
                }]
            }, {
                "id": "2",
                "data": {
                    "menuName": "数据统计",
                    "menuCode": "BusClock",
                },
                "childTreeNode": []
            }, {
                "id": "3",
                "data": {
                    "menuName": "人事管理",
                    "menuCode": "",
                },
                "childTreeNode": []
            }, {
                "id": "4",
                "data": {
                    "menuName": "基础管理",
                    "menuCode": "",
                },
                "childTreeNode": []
            }]
    }
</script>

3、结果

 

转载于:https://www.cnblogs.com/Amaris-Lin/p/8258561.html

weixin_30617737
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js递归组件实现组织架构树和选人功能案例分析
10-16
主要介绍了Vue.js递归组件实现组织架构树和选人功能,本文通过案例代码讲解的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue之递归组件实现树形目录
weixin_30940783的博客
12-11 935
递归组件的应用===》可以通过组件命名来自己使用自己的组件 实例如下 父组件 <div class="content"> <detail-list :list="categoryList"></detail-list> </div> 子组件 <template> <div> ...
Vue利用递归实现简单的目录树结构
01-24 570
日前，在工作中有一个类似chrome书签管理器的需求，在调研了iview的Tree组件，Vue-dragging，Vue-drag-tree后发现并不能满足需求，故而计划自己实现。 本文着重实现树形结构的展示，拖拽功能的完善后续会完善。 Vue作为组件化的框架，原则上所有的页面元素都由数据...
vue递归组件怎么使用，手写递归组件tree下拉列表。
qq_54753561的博客
06-12 1617
vue递归组件怎么使用，手写递归组件tree下拉列表。引入要递归的组件，在它的模板内可以递归地调用自己，不过，只有当它有name选项时才可以。一定要设置name属性也就是组件的名字。
java递归无限目录树_vuejs使用递归组件实现树形目录
weixin_39831242的博客
02-25 125
上篇文章我提到了通讯录的开发，里面的目录使用了vue的递归组件实现的树形目录，这篇文章就来讲讲如何实现树形目录吧！首先实现效果如下，觉得菜单还是比较nice的是吧：这边数据调用的是数据库的数据的，需要数据库进行数据的构造，这里涉及到java的构造多叉树的知识，后续我会另外写一篇文章详细讲解，这里讲下前端。数据可以先构造json使用，这里用到的格式大概如下,以childList来嵌套子菜单：{id：...
vuejs使用递归组件实现树形目录的方法
10-19
1. **组件结构**：在树形目录的每一层，都使用相同结构的组件。每个节点组件内部，根据是否有`childList`来决定是否需要渲染子节点列表。 2. **数据结构**：以`childList`来组织子节点数组，这是构建多叉树数据的...
vue递归组件实战之简单树形控件实例代码
10-16
在本实例中，我们将探讨如何利用Vue递归组件创建一个简单的树形控件。 1. **递归组件的概念** 递归组件是Vue组件的一种特殊形式，它会在自身内部调用自身，直到满足某个终止条件。这种机制使得我们可以处理层级...
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
10-18
递归组件是Vue.js中的一个高级...以上就是如何使用Vue.js递归组件实现一个可折叠的树形菜单的基本步骤和知识点。通过对递归组件的理解以及递归调用的终止条件，可以在Vue.js项目中灵活地处理和展示具有层级关系的数据。
Vue2递归组件实现树形菜单
08-30
Vue2递归组件是用于构建复杂自定义布局，特别是处理层级关系数据的一种高效方式，例如在实现树形菜单时。递归组件的概念是基于组件自身能够调用自身，通过不断迭代来呈现数据结构。在本例中，我们将讨论如何利用Vue2...
vue 递归组件实现目录树，数据处理
min的博客
01-10 781
vue 实现目录树 递归组件 菜单展收
vue递归组件 （树形控件 ）
jx69693678nab的博客
01-02 2892
首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="判断条件"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染 1.准备一个树状的递归数据 navigation: [ { types: ...
vue递归组件与动态组件
liuhua_2323的博客
12-20 539
递归组件 递归组件就是指组件在模板中调用自己，开启递归组件的必要条件，就是在组件中设置一个name选项。比如下面的示例： <template> <div> <my-component></my-component> </div> </template> <script> export de...
vue递归组件实现无限极分类菜单/无限极树状图，点击其中一项菜单关闭其它所有菜单项，vue递归组件通过数据定位当前组件层级及定位哪一条数据
12-31 1305
先看效果，测试案例，随便加了个css动画： 不知道使用 vue 递归组件注意事项的自行查看官方文档哈 【查看】 比较简单的一个 demo 仅供参考，其它复杂功能的话，能传值，能定位到具体数据了，什么功能做不了，是不是？？？ 准备数据 store.js： // store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { l
树结构 递归删除不符合要求的数据
sinat_36017053的博客
01-19 988
//根据过滤数组中的某些对象 let test1 = [ { key1:"vaue1", show:true, children:[ { childrenKey1:"childrenValue1", show:false
Vue实现递归组件
热门推荐
weixin_53291256的博客
04-05 1万+
Vue实现递归组件 文章目录Vue实现递归组件前言一、递归组件是什么？二、Vue实现递归的核心思路三、代码示例1.父级2.子级3、实现效果四、总结 前言 在我们开发过程中，为了提高开发效率，降低开发难度，我们会直接使用组件库来实现，同时也衍生出了很多优秀的组件库，如：饿了么、蚂蚁、Iview、vant等等。但是有时这些组件库提供给我们的组件不满足我们的需求或者定制组件时成本太高，那么我们就要手动实现了。 一、递归组件是什么？ 字面理解为层层递进最后归并到一起，它的特点就是层级分明。 例如饿了么组件库的树
Vue移动端树形控件实现（递归组件）
Jerry的博客
03-14 9873
写在前面 因项目中需要用到树形控件，第三方的组件也不满足项目的使用需求，就自己造了一个车轮子，用Vue递归组件的方式实现，代码简单易懂，直接复制即可使用。 效果图 子组件代码 <template> <ul v-if="data.length"> <li v-for="(item, i) in data" :key="i" @click.stop="sel...
Vue实际运用四：递归组件-做树状菜单列表
GTbond的博客
12-23 3739
递归组件 使用场景：Vue的递归组件，组件递归自身实现无限制层级的渲染，适合树状菜单 1.创建Tree.vue文件，作为组件树的入口文件，类似于App.vue，一些数据data会在Tree.vue进行一些初始化的操作。 <template> <div> //通过自定义属性传递 数据给子组件 <TreeMenu :label="treeList.label" :nodes="treeList.nodes"></TreeMenu&gt
vue 菜单递归
m0_57796453的博客
04-15 1348
示例图
vue3 递归无限分类树型菜单+搜索功能
m0_64397933的博客
06-08 1434
vue3 递归无限分类树型菜单+搜索功能
Vue递归组件实现动态树形控件
作者在尝试使用Element UI的树形控件后，发现样式不可控且扩展性不佳，从而转向自定义Vue递归组件的解决方案。" 在Vue.js中，递归组件是一种可以自我调用的组件，非常适合用于构建层级结构的数据，如树形结构。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值