vue 官方递归实现树形组件的重写改造封装,实现动态增加子节点
1.在项目中新建两个.vue组件:test1,test2在mian.js内导入test2组件,变为全局组件:import test2 from './test2'Vue.component('item',test2);2.test1.vue的内容:<template><ul id="demo"><itemcl
·
1.在项目中新建两个.vue组件:test1,test2
在mian.js内导入test2组件,变为全局组件:
import test2 from './test2'
Vue.component('item',test2);
2.test1.vue的内容:
<template>
<ul id="demo">
<item
class="item"
:model="treeData">
</item>
</ul>
</template>
<script>
export default{
data(){
return{
treeData:
{name: 'My Tree',// 一级数据
children: [
{ name: 'hello2' },// 二级数据
{ name: 'wat2' },
{
name: 'child folder2',
children: [
{name: 'child folder3',// 三级数据
children: [
{ name: 'hello4' },// 四级数据
{ name: 'wat4' }
]
},
{ name: 'hello3'},// 三级数据
{ name: 'wat3'},
{name: 'child folder3',
children: [
{ name: 'hello4' },// 四级数据
{ name: 'wat4' }
]
}
]
}
]
}
}
}
}
</script>
<style>
ul {
padding-left: 1em;
line-height: 1.5em;
list-style-type: dot;
}
</style>
3.test2的内容:
<template>
<li style="list-style: none;" id>
<!-- 蓝色是点击事件,红色是双击事件-->
<div :class="{bold: isFolder}" @click="toggle" @dblclick="changeType">
{{ model.name }}
<!--有孩子时,没有展开孩子open为false显示为+号,-->
<span v-if="isFolder">[{{ open ? '-' : '+' }}]</span>
</div>
<ul v-show="open" v-if="isFolder">
<item class="item" v-for="(model,index) in model.children" :key="index" :model="model">{{model.name}}</item>
<li class="add" @click="addChild">+</li>
</ul>
</li>
</template>
<script>
export default{
props:{
model:Object
},
data(){
return{
open:false,
}
},
computed: {
isFolder: function () {// 是否有文件,有的话返回子文件和子文件个数
return this.model.children && this.model.children.length
}
},
methods: {
toggle: function () {// 如果有孩子时,选择展示或者隐藏孩子
if (this.isFolder) {
this.open = !this.open
}
},
changeType: function () {// 双击时增加为带有子节点的父节点
if (!this.isFolder) {
// vue动态添加新的根级目录,官方方法vm.$set( target, key, value )接收三个参数,
// target可以为对象或者数组,key可以为字符串或者数字,value可以为任意类型
// 也可以使用Vue.set(this.model, 'children', []),这样使用vue的全局实例,但是需要在该页面导入vue
this.$set(this.model, 'children', []);
this.addChild();
this.open = true
}
},
addChild: function () {// 添加子节点
this.model.children.push({
name: 'new stuff'
})
}
}
}
</script>
<style>
body {
font-family: Menlo, Consolas, monospace;
color: #444;
}
.item {
cursor: pointer;
}
.bold {
font-weight: bold;
}
</style>
4.实现效果:
5.单击加号时增加一个子节点,双击加号时增加一个带有子节点的根节点:
单击时:
双击时:
更多推荐
已为社区贡献13条内容
所有评论(0)