<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

    body {

  font-family: Menlo, Consolas, monospace;

  color: #444;

}

.item {

  cursor: pointer;

}

.bold {

  font-weight: bold;

}

ul {

  padding-left: 1em;

  line-height: 1.5em;

  list-style-type: dot;

}

</style>

</head>

<body>

<script type="text/x-template" id="item-template">

  <li>

    <div

      :class="{bold: isFolder}"

      @click="toggle"

      @dblclick="makeFolder">

      {{ item.name }}

      <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>

    </div>

    <ul v-show="isOpen" v-if="isFolder">

      <tree-item

        class="item1"

        v-for="(child, index) in item.children"

        :key="index"

        :item="child"

        @make-folder="$emit('make-folder', $event)"

        @add-item="$emit('add-item', $event)"

      ></tree-item>

      <li class="add" @click="$emit('add-item', item)">+</li>

    </ul>

  </li>

</script>

<p>(You can double click on an item to turn it into a folder.)</p>

<!-- the demo root element -->

<ul id="demo">

  <tree-item v-for="item in treeData"

    class="item2"

    :item="item"

    @make-folder="makeFolder"

    @add-item="addItem"

  ></tree-item>

</ul>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>

<script type="text/javascript">

var treeData =  [

    { 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' }

          ]

        }

      ]

    }

  ]

// define the tree-item component

Vue.component('tree-item', {

  template: '#item-template',

  props: {

    item: Object

  },

  data: function () {

    return {

      isOpen: false

    }

  },

  computed: {

    isFolder: function () {

      return this.item.children &&

        this.item.children.length

    }

  },

  methods: {

    toggle: function () {

      if (this.isFolder) {

        this.isOpen = !this.isOpen

      }

    },

    makeFolder: function () {

      if (!this.isFolder) {

        this.$emit('make-folder', this.item)

        this.isOpen = true

      }

    }

  }

})

// boot up the demo

var demo = new Vue({

  el: '#demo',

  data: {

    treeData: treeData

  },

  methods: {

    makeFolder: function (item) {

      Vue.set(item, 'children', [])

      this.addItem(item)

    },

    addItem: function (item) {

      item.children.push({

        name: 'new stuff'

      })

    }

  }

})

</script>

</body>

</html>

vue树状结构（tree）的更多相关文章

  1. 树状结构 Tree data structure in C#

    delegate void TreeVisitor<T>(T nodeData); class NTree<T> { private T data; private Linke ...

  2. 原生JS实现树状结构列表

    树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢? 这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染 ...

  3. 由简入繁实现Jquery树状结构

    在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一些插件,也是可以实现这些效果的,比 ...

  4. tkinter中树状结构的建立（十四）

    树状结构的建立 import tkinter from tkinter import ttk wuya = tkinter.Tk() wuya.title("wuya") wuya ...

  5. 用Django ORM实现树状结构

    前言 之前看对于用关系数据库实现树状结构的方法就知道一直做自关联的表,但是感觉自关联查询太慢了,最近看到一篇文章,感觉视野开拓了好多,文章:数据库表设计,没有最好只有最适合来自:微信. 下面就针对这里 ...

  6. JQuery 树状结构 jQuery-treeview.js 插件

    由简入繁实现Jquery树状结构 在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一 ...

  7. oracle 树状结构递归 PL/SQL输出控制 包括空格输出控制

    树状结构 存储过程中通过递归构建,类似BBS回帖显示,代码共三段: 建表,插入数据,创建存储过程显示: 1.create table article(id number primary key,con ...

  8. openerp学习笔记 对象间关系【多对一(一对一)、一对多(主细结构)、多对多关系、自关联关系(树状结构)】

    1.多对一(一对一)关系:采购单与供应商之间的关系 'partner_id':fields.many2one('res.partner', 'Supplier', required=True, sta ...

  9. 树 List Leaves 【用数组模拟了树状结构建树+搜索叶子节点+按照特殊规律输出每个叶子节点】

    Given a tree, you are supposed to list all the leaves in the order of top down, and left to right. I ...

随机推荐

  1. Error:Unexpected lock protocol found in lock file. Expected 3, found 49.

    关于这个错误,今天研究了两三个小时的时间,查看网上的教程都解决不了问题,后来发现是自己的文件目录导入的有问题. 现在把自己关于解决这个问题的详细步骤说明一下. (1)首先,你先查看一下自己导入文件的目 ...

  2. mongoose 开源http库

    Mongoose是一个用C编写的网络库.它为客户端和服务器模式实现TCP,UDP,HTTP,WebSocket,CoAP,MQTT的事件驱动的非阻塞API. 设计理念: Mongoose有三个基本的数 ...

  3. Spring注解配置、Spring aop、整合Junit——Spring学习 day2

    注解配置: 1.为主配置文件引入新的命名空间(约束) preference中引入文件 2.开启使用注解代理配置文件 <?xml version="1.0" encoding= ...

  4. 数据可视化--> numpy

    一.NumPy 1.简介: 官网链接:http://www.numpy.org/ NumPy是Python语言的一个扩充程序库.支持高级大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库 ...

  5. 大数据（量上GB的）查看命令

    大数据查看指令 cmd中(tab键可补全) type 文件名:全部查看 more 文件名:Enter键,按一下查看一页

  6. R语言-八皇后问题

    老师给我出了个暑期作业:用R语言解决八皇后问题. 八皇后问题:国际象棋棋盘(8×8)上放8个“后”,使8个“后”之间互相不能被进攻.(即:每个“后”所在行.列.两条斜线都没有其它子) 查看网上,大多用 ...

  7. luogu P1077 摆花 x

    P1077 摆花 题目描述 小明的花店新开张,为了吸引顾客,他想在花店的门口摆上一排花,共m盆.通过调查顾客的喜好,小明列出了顾客最喜欢的n种花,从1到n标号.为了在门口展出更多种花,规定第i种花不能 ...

  8. windows10 gcc编译C程序（简单编译）

    参考:http://c.biancheng.net/view/660.html gcc可以一次性完成C语言源程序的编译,也可以分步骤完成:下面先介绍一次性编译过程. 1.生成可执行程序 cd xxx ...

  9. sh_02_第一个while循环

    sh_02_第一个while循环 # 打印 5 遍 Hello Python # 1. 定义一个整数变量,记录循环次数 i = 1 # 2. 开始循环 while i <= 3: # 1> ...

  10. 金蝶K3 WISE 13.1版本服务器虚拟机环境部署

    闲来无事,整个13.1版本的金蝶玩玩. 系统环境:WIN2008 R2,x64位 数据库:MSSQL 2008 R2,X64位 记录下操作步骤: 1.准备安装软件,见图: 2.安装资源包,.net3. ...