<!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. Java 判断是否为回文字符串

    回文字符串有两种:abcba,abccba. 代码: static boolean func(String str) { int len = str.length(); for (int i = 0; ...

  2. python-字符编码的转换

    python-字符编码的转换 1.了解基础知识 ASCII  一个英文,占一个字节.只能存英文和特殊字符. gb2312 约可以存7000中文 gb1830 约可以存27000中文 gbk 默认中文, ...

  3. 关于 php for zookeeper

    原文:Distributed application in PHP with Apache Zookeeper 地址:http://systemsarchitect.net/distributed-a ...

  4. Console Add Item –Java使用eBay API SDK刊登商品 详解

    准备工作: 1. 运行Eclipse (或其他Java IDE) 2.创建一个ConsoleAddItem工程(项目) 选JDK 1.5.1.6.1.8等版本,已测试1.6.1.8版本. 3.下载JA ...

  5. mysql安装配置和启动

    MySQL数据库安装配置和启动   1,下载MySQL 打开MySQL的官网www.mysql.com,发现有一个DOWNLOADS 点击它,进入到MySQL的下载页面,在页面的底部有一个MySQL ...

  6. 【GDKOI2013选拔】大LCP

    题目 LCP就是传说中的最长公共前缀,至于为什么要加上一个大字,那是因为-你会知道的. 首先,求LCP就要有字符串.既然那么需要它们,那就给出n个字符串好了. 于是你需要回答询问大LCP,询问给出一个 ...

  7. CentOS8 中文输入法

    CentOS8发布了,安装了下试试,结果发现中文输入法调不出来. 系统安装完成后,在系统[设置]的[Region&Language]里的[输入源]里可以添加汉语输入源,但是不能打中文字. 下面 ...

  8. priority_queue与multiset

    感觉c++最有用的stl是bitset.堆(优先队列)和平衡树,其他的都可以手打 这里主要讲一下堆和平衡树的基本用法和区别所在 priority_queue 堆/优先队列 定义: priority_q ...

  9. CSS设置背景色

    最好用background-color:rgba(37,77,113,1); 因为用opacity会让所有自标签都改变

  10. 4. ClustrixDB CLX命令详解

    Clustrix提供了一个名为clx的实用程序来管理其分布式ClustrixDB数据库. 命令在 /opt/clustrix/bin/ 下面 sudo su - clxm 用户即可使用 clx hel ...