Project requirements, we have to package a tree plugin to simulate the back-end of the class
During encountered several problems
1) When you add a child node, the original event is not triggered by the entry into force of the
solution:
if (!item.children) {
this.$set(item, 'children', [])
this.$set(item, 'expand', true)
}
item.children.push({
title: 'leaf 1-1-1'
})
The following is the complete code:
<template>
<ul class="ivu-tree-children">
<li v-for="item in folder">
<span @click="open(item)" class="ivu-tree-arrow" :class="[item.expand?'ivu-tree-arrow-open':'',item.children == undefined?'hide-arrow':'']">
<Icon type="ios-arrow-forward"/>
</span>
<span class="ivu-tree-title">
{{ item.title }}
<Input size="small" v-if="item.children == undefined" style="width: 100px;margin-left:10px"></Input>
<span>
<Icon type="md-create" @click="alterNode('修改')"/>
<Icon type="md-add-circle" @click="addChild(item)"/>
<Icon type="ios-remove-circle" @click="deleteNode('删除节点')"/>
</span>
</span>
<Ltree v-if="item.expand" :folder="item.children"></Ltree>
</li>
</ul>
</template>
<script>
// var time = null; // 在这里定义time 为null
export default {
name: "Ltree",
props: ["folder", "playVedio", "getCurNode", "treeData", "vedio"],
created() {
},
data() {
return {
handleTree: {
curChoosed: {
deviceId: '',
cameraId: ''
}
}
}
},
mounted() {
},
methods: {
open(item) {
item.expand = !item.expand;
},
alterNode(id) {
alert(id)
},
deleteNode() {
},
addChild(item) {
console.log(item)
if (!item.children) {
this.$set(item, 'children', [])
this.$set(item, 'expand', true)
}
item.children.push({
title: 'leaf 1-1-1'
})
}
}
}
</script>
<style scoped lang="less">
.ivu-tree-children {
color: #000;
.ivu-tree-title {
color: #000
}
.hide-arrow {
height: 0;
overflow: hidden;
}
}
</style>
