Vue组件之无限级目录树构建

渐渐,了解Vue也有一个月了,最近遇上个无限级目录树的小功能,为了能多学习避免自己操作dom或是网上下插件,下决心用Vue来解决当下问题,毕竟毛爷爷讲过,实践出真知,本次主要运用了组件之间的相互循环引用,然后就是循环组件与父组件之间的通信,

源数据格式采用了毗邻结构转为多维数组的形式,没办法,我也暂且只能想到这样去做,学习革命任重道远.......

 1     Vue.component(‘item‘,{
 2         template:‘<ul> 3                     <li v-for="child in model"> 4                         <item-child v-if="child.children" :folder="child"  @transid="getid(arguments[0])"/> 5                         <p v-else @click="getid(child.id)">{{ child.name }}</p> 6                       </li> 7                   </ul>‘,
 8         props:{ model: Object },
 9         methods:{
10             getid:function(id){
11                 this.$emit(‘transid‘,id);
12             },
13         }
14     })
15     Vue.component(‘item-child‘,{
16         template:‘<div>17                   <p @click="toggle(folder.children)" @click="getid(folder.id)">{{ folder.name }}<a v-if="folder.children">{{ open ? pack : lanch}}</a></p>18                   <item v-if="folder.children" :model="folder.children" v-show="open" @transid="getid(arguments[0])"/>19                 </div>‘,
20         props:{ folder: Object },
21         methods:{
22              toggle:function(status){
23                 if(status){ this.open = !this.open; }
24             },
25             getid:function(id){
26                 this.$emit(‘transid‘,id);
27             }
28           },
29         data:function(){
30             return {
31                 open:false,
32                 lanch:‘ [+]‘,
33                 pack:‘ [-]‘,
34             }
35         },
36     })

这里只贴出了组件部分代码,最终效果展示:

now!这是第一篇博客,我的一小步仍是我的一小步。

时间: 2024-11-10 01:31:04

Vue组件之无限级目录树构建的相关文章

dTree无限级目录树和JQuery同步Ajax请求

以前都是用JQuery对树的支持来实现目录树的,近来闲来无事就弄了下dTree,感觉其无限级目录还是挺好的,而且它的使用也比较方便,基本上就是先把要用的js文件即dtree.js和css文件dtree.css引入,另外就是它默认的图片,当然这些图片都是可以自己指定的,它的css样式也可以自己改变的! 关于dTree就先谈谈它的node,dTree的node的构造方法可以指定下列参数, Js代码 id //唯一标识,数字型 pid//父节点的id,如果是根结点那就只能是-1,一般来讲只有一个最顶层

目录树构建及查询案例(二)

create table TREE ( TREEID   VARCHAR2(20) not null, LABLE    VARCHAR2(50) not null, PARENTID VARCHAR2(20) ); --创建主键 alter table TREE add constraint PK_TREE primary key (TREEID); --创建表内外键 alter table TREE add constraint FK_TREE foreign key (PARENTID)

深入vue - 源码目录及构建过程分析

 公众号原文链接:深入vue - 源码目录及构建过程分析   喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」 ?“ 本文主要梳理一下vue代码的目录,以及vue代码构建流程,旨在对vue源码整体有一个认知,有助于后续对源码的阅读.” 一.目录结构 上图是对vue的代码的所有目录进行的梳理,其中源码位于src目录下,下面对src下的目录进行介绍. compiler 该目录是编译相关的代码,即将 template 模板转化成 render 函数的代码. vue 提供了 render 函数,r

【Vue CLI】从安装到构建项目再到目录结构的说明 &#196968;

目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 原文: http://blog.gqylpy.com/gqy/284 "Vue CLI是一个基于Vue.js进行快速开发的完整系统. Vue CLI致力于将Vue生态中的工具基础标准化.它确保了各种构建工具只需给予智能的默认配置便可平稳衔接. 这样我们就可以专注在撰写应用上,而不必花好几天去纠结配置的问题.于此同时,它还为每个工具提供了调整配置的灵活性.

【Lua】Lua + LWT + ExtJS构建目录树

Lua处理后台逻辑,Lua lwt搭建后台程序,ExtJS根据后台传来的json数据构建目录树. 前台html和ExtJS代码不用多讲,直接上代码: treePanel.html 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 5 <title>ExtJS TreePanel</

JS动态构建一棵目录树

JS动态构建一棵目录树 在使用frameset布局的时候,经常会用到目录树,我们可以把一棵树写死,但是更多的情况是,这棵树需要随时被改动,所以我们期望的是他能够被动态的构建. MVC,算是了解一点,那本文就把这棵树根据M-V-C给拆开分解吧. 点击链接demo→ 下面就来看看这棵树是怎么构建的. Module [数据层] var tree = { "id": 0, "a1": { "id": 1, "name": "

JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

阅读目录 一.为什么组件很重要 二.Vue里面的组件基础知识 1.组件的概念 2.组件原理 3.组件使用 三.封装自己的Component 1.使用Component封装bootstrapTable 2.封装select 3.查看其他Vue框架源码 四.总结 正文 前言:转眼距离上篇 JS组件系列--又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue的发展也是异常迅猛,不过这好像和博

webpack单独构建scss文件与.vue组件里构建scss的一个坑

在入口main.js里构建scss是通过引入模块的方式 import './assets/_reset.scss'; import './assets/_flex.scss'; import './assets/_functions.scss'; 在.vue组件里是单独构建的 <style lang="scss" scoped> img { width: rem(300px); } #product, .gallery, .detail { width: rem(750px

Vue.js 源码目录设计

Vue.js 的源码都在 src 目录下,其目录结构如下. src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── server # 服务端渲染 ├── sfc # .vue 文件解析 ├── shared # 共享代码 compiler compiler 目录包含 Vue.js 所有编译相关的代码.它包括把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能. 编译的工作可以在构建时做(借助 webpac