JS篇 - vue节 - vue实现递归树

wthee 发布于2019-08-21 16:57 / 838人阅读

摘要：前言大家都知道只有循环，如果一层写一个循环，显然是无法实现未知层次的数据。

前言

大家都知道vue只有for循环，如果一层写一个循环，显然是无法实现未知层次的数据。
对于这个问题，官方的大神早就出了一个demo来实现递归，下面来剖析下它的原理
vue官方的treeview demo >>

原理

创建一个子项的组件，这个组件内调用当前组件，实现递归

官方阉割版代码

HTML代码

js代码

// demo数据
var data = {
    name: "My Tree",
    children: [
        { name: "hello" },
        { name: "wat" },
        {
            name: "child folder",
            children: [
                {
                    name: "child folder",
                    children: [
                        { name: "hello" },
                        { name: "wat" }
                    ]
                },
                { name: "hello" },
                { name: "wat" },
                {
                    name: "child folder",
                    children: [
                        { name: "hello" },
                        { name: "wat" }
                    ]
                }
            ]
        }
    ]
}

// 定义子级组件
Vue.component("item", {
    template: "#item-template",
    props: {
        model: Object
    },
    data: function () {
        return {
        }
    },
    methods: {
    }
})


var demo = new Vue({
    el: "#demo",
    data: {
        treeData: data
    }
})

阉割版代码 >>

GPU云服务器云服务器 VUE实现webrtc Vue实现分页 vue+webrtc实现实时视频通话,语音通话 Vue.js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88957.html

手把手教你从零写一个简单的 VUE--模板篇

摘要：转换成为模板函数联系上一篇文章，其实模板函数的构造都大同小异，基本是都是通过拼接函数字符串，然后通过对象转换成一个函数，变成一个函数之后，只要传入对应的数据，函数就会返回一个模板数据渲染好的字符串。教程目录1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 Hello，我又回来了，上一次的文章教会了大家如何书写一个简单 VUE，里面实现了VUE 的...

feng409 2019-08-21 11:52 评论0 收藏0
基于vue.js实现树形表格的封装

摘要：此页面是实现树表格的关健页面。这里就是关健点，因为这个子组件是需要递归实现，所以，需要动态注册到当前组件中。补充一点不要只看部分，部分才是这个树表格的关健所在。基于vue.js实现树形表格的封装（vue-tree-table）前言由于公司产品（基于vue.js）需要，要实现一个树形表格的功能，百度、google找了一通，并没有发现很靠谱的，也不是很灵活。所以就用vue自己撸了一个...

yedf 2019-08-26 12:09 评论0 收藏0
深入 Parcel--架构与流程篇

摘要：本篇文章是对的源码解析，代码基本架构与执行流程，带你了解打包工具的内部原理，在这之前你如果对不熟悉可以先到官网了解介绍下面是偷懒从官网抄下来的介绍极速零配置应用打包工具极速打包使用进程去启用多核编译。 showImg(https://segmentfault.com/img/bVbpZRp?w=1241&h=893); 本篇文章是对 Parce 的源码解析，代码基本架构与执行流程，带你...

yuxue 2019-08-23 16:00 评论0 收藏0