<!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. 关于时间：UTC时间、GMT时间、本地时间、Unix时间戳

    1.UTC时间 与 GMT时间我们可以认为格林威治时间就是时间协调时间(GMT=UTC),格林威治时间和UTC时间均用秒数来计算的. 2.UTC时间 与 本地时UTC + 时区差 ＝ 本地时间时区差东 ...

  2. 004-SaltStack入门篇之数据系统Grains、Pillar

    1.什么是Grains? Grains是saltstack的组件,用于收集salt-minion在启动时候的信息,又称为静态信息.可以理解为Grains记录着每台Minion的一些常用属性,比如CPU ...

  3. BZOJ 4999 LCA树状数组差分维护DFS序

    Description 给一颗树,每个节点有个初始值 现在支持以下两种操作: 1. C i x(0<=x<2^31) 表示将i节点的值改为x 2. Q i j x(0<=x<2 ...

  4. DECLARE_GLOBAL_DATA_PTR

    DECLARE_GLOBAL_DATA_PTR在arch/arm/include/asm/global_data.h中定义 #include <asm-generic/global_data.h ...

  5. 解决Eclipse中新建jsp文件ISO8859-1 编码问题

    看了许多的贴说是在eclipse --> window --> Preferences --> General --> Content Types --> text--& ...

  6. vue 中一些API 或属性的常见用法

    prop 官方解释:Prop 是你可以在组件上注册的一些自定义特性.当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性. 通俗点讲就是:prop是父组件用来传递数据的一个自定义 ...

  7. linux常见的操作指令

    一:非正确退出程序,再次启动显示端口被占用 netstat -ntulp n ---  显示ip代替网络接口信息,显示出网络连接情况 t  ---  显示TCP协议的链接状况 u ---  显示UDP ...

  8. SpringCloud学习系列-Eureka服务注册与发现(1)

    1.Eureka的基本架构 Spring Cloud 封装了 Netflix 公司开发的 Eureka 模块来实现服务注册和发现(请对比Zookeeper). Eureka 采用了 C-S 的设计架构 ...

  9. 基于Ubuntu 搭建 WordPress 个人博客 - 开发者实验室 - 腾讯云

    1.准备 LAMP 环境 安装 Apache2 在终端输入该命令 ,使用 apt-get 安装 Apache2: sudo apt-get install apache2 -y 安装好后,您可以通过访 ...

  10. python 字符词串和字符串的转换

    type(' i am ') str type(''.join('i am')) str ''.join('sda sadaa') 'sda sadaa' q=str('i am the teache ...