vue树状结构（tree）
<!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）的更多相关文章
- 树状结构 Tree data structure in C#
delegate void TreeVisitor<T>(T nodeData); class NTree<T> { private T data; private Linke ...
- 原生JS实现树状结构列表
树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢? 这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染 ...
- 由简入繁实现Jquery树状结构
在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一些插件,也是可以实现这些效果的,比 ...
- tkinter中树状结构的建立（十四）
树状结构的建立 import tkinter from tkinter import ttk wuya = tkinter.Tk() wuya.title("wuya") wuya ...
- 用Django ORM实现树状结构
前言 之前看对于用关系数据库实现树状结构的方法就知道一直做自关联的表,但是感觉自关联查询太慢了,最近看到一篇文章,感觉视野开拓了好多,文章:数据库表设计,没有最好只有最适合来自:微信. 下面就针对这里 ...
- JQuery 树状结构 jQuery-treeview.js 插件
由简入繁实现Jquery树状结构 在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一 ...
- oracle 树状结构递归 PL/SQL输出控制 包括空格输出控制
树状结构 存储过程中通过递归构建,类似BBS回帖显示,代码共三段: 建表,插入数据,创建存储过程显示: 1.create table article(id number primary key,con ...
- openerp学习笔记 对象间关系【多对一(一对一)、一对多(主细结构)、多对多关系、自关联关系(树状结构)】
1.多对一(一对一)关系:采购单与供应商之间的关系 'partner_id':fields.many2one('res.partner', 'Supplier', required=True, sta ...
- 树 List Leaves 【用数组模拟了树状结构建树+搜索叶子节点+按照特殊规律输出每个叶子节点】
Given a tree, you are supposed to list all the leaves in the order of top down, and left to right. I ...
随机推荐
- jenkins 构建时显示git分支插件、显示构建分支插件
参数化构建分支 1.安装插件:Git Parameter 2.找到我们在Jenkins中建立的工程,勾选“参数化构建过程”,并如下配置 3.在“源码管理”中如下配置 Jenkins构建完显示构建用户和 ...
- P5018 对称二叉树题解
题目内容链接: 那么根据题意,上图不是对称二叉树,只有节点7的子树是: 通俗来说,对称二叉树就是已一个节点x为根的子树有穿过x点的对称轴并且对称轴两边的对称点的大小也必须相等,那么这棵树就是对称二叉树 ...
- [uboot] （第一章）uboot流程——概述（转）
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/ooonebook/article/det ...
- 负载均衡（四）Nginx负载均衡策略
一.Nginx的作用 1.反向代理 代理:转发请求的服务器,分代理和反向代理.代理一般指的是我们使用的DNS,反向代理是放在服务端的大家通常用Nginx来解决.实际应用中,由于服务端处于一个中心位置, ...
- cm日志哪里看
root@d001:/home/centos# find / |grep cloudera-scm-agent.log/opt/cm-5.13.0/log/cloudera-scm-agent/clo ...
- 破解wifi_失败
sudo apt install reaver aircrack-ng //安装需要的软件包ifconfig //获取本地网卡接口sudo airmon-ng start wlp3s0 //无线网卡设 ...
- Redis 数据安全与性能保障
数据安全与性能保障 ·将数据持久化至硬盘·将数据复制至其他机器·处理系统故障·reids事务·非实物型流水线·诊断性能问题 持久化选项: 共享选项,这个选项决定了快照文件和AOF文件的保存位置dir ...
- 结合webpack使用vue-router
demo结构 webpack.config.js var path = require('path'); // const { VueLoaderPlugin } = require('vue-loa ...
- SDRAM学习笔记
摘自“开源骚客视频教程” 1.仲裁模块就是用来控制什么时候读.写.刷新 2.模块中的状态机 3.初始化时序图说明,来自“IS42S116160.pdf”文件 4.SDRAM写时序图,来自“IS42S1 ...
- BZOJ 3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛 水题~
水~ #include <cstdio> #define N 100004 #define mod 5000011 #define setIO(s) freopen(s".in& ...