<template>
|
<div class="h-tree-wrapper">
|
<divider-card
|
v-for="(item, key) in tree" :key="key"
|
:title="item.title"
|
:maxHeight="maxHeight">
|
<div class="h-tree" style="margin-left: 32px;">
|
<div class="tree-folder" :class="{'folder-open': item.open}">
|
<div class="tree-folder-header" @click="open(key)">
|
<span class="mrr16 md-add">+</span>
|
<span class="mrr16 md-del">-</span>
|
<a href="javascript:;">{{item.txt}}</a>
|
</div>
|
<div class="tree-folder-content">
|
<div class="tree-file"
|
v-for="(children,ckey) in item.childrens" :key="ckey">
|
<div class="tree-file-content" @click="handleClick(key, ckey)">
|
<span class="mrr16">-</span>
|
<a href="javascript:;"
|
:class="{'file-active':children.active}">{{children.txt}}</a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</divider-card>
|
</div>
|
</template>
|
<script>
|
import DividerCard from '../components/DividerCard';
|
import $ from 'jquery';
|
export default {
|
components: {
|
DividerCard
|
},
|
props:{
|
data: {
|
type: Array,
|
required: true
|
},
|
maxHeight: {
|
type: String,
|
default: '300px'
|
},
|
exclude: {
|
type: [Number, Boolean],
|
default: true
|
}
|
},
|
data() {
|
return {
|
tree: []
|
}
|
},
|
watch:{
|
data: {
|
handler: function(obj) {
|
this.setTree();
|
},
|
deep: true
|
}
|
},
|
filters: {
|
typeFilter: function(childrens) {
|
var result = 'tree-folder'
|
if(typeof(childrens) =='undefined') {
|
result = 'tree-file'
|
}
|
return result;
|
}
|
},
|
methods: {
|
init: function(key) {
|
var tree = this.tree;
|
for(var i=0; i<tree.length; i++) {
|
var _tree = tree[i];
|
if(key == i) {
|
continue;
|
}
|
_tree.open = false;
|
}
|
},
|
initSub: function() {
|
var tree = this.tree;
|
for(var i=0; i<tree.length; i++) {
|
var _tree = tree[i];
|
var childrens = _tree.childrens;
|
for(var k=0; k<childrens.length; k++) {
|
var children = childrens[k];
|
children.active = false;
|
}
|
}
|
},
|
open: function(key) {
|
if(this.exclude) {
|
this.init(key);
|
}
|
var open = this.tree[key].open;
|
this.tree[key].open = open?false:true;
|
},
|
handleClick: function(key, ckey) {
|
this.initSub();
|
var childrens = this.tree[key].childrens;
|
var file = childrens[ckey];
|
file.active = true;
|
// onsole.log(file);
|
this.$emit('fileClick', file);
|
},
|
setTree: function() { // 对树的数据进行处理
|
var data = $.extend(true, [], this.data);
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
// 设置是否展开
|
if(typeof(_data.open) == 'undefined') {
|
_data.open = false;
|
}
|
var childrens = _data.childrens;
|
// 遍历子属性添加active属性
|
for(var k=0; k<childrens.length; k++) {
|
var children = childrens[k];
|
// 设置是否展开
|
if(typeof(children.active) == 'undefined') {
|
children.active = false;
|
}
|
}
|
|
}
|
this.tree = data;
|
}
|
},
|
mounted: function() {
|
this.setTree();
|
}
|
}
|
</script>
|
<style scoped>
|
.tree-folder-header {
|
font-size: 20px;
|
}
|
.tree-folder-header a{
|
color: #000000;
|
}
|
.tree-file {
|
font-size: 16px;
|
}
|
.tree-file a{
|
color: #000000;
|
}
|
.tree-folder-header .md-del {
|
display: none;
|
}
|
.folder-open .tree-folder-header .md-del{
|
display: inline;
|
}
|
.folder-open .tree-folder-header .md-add {
|
display: none;
|
}
|
.tree-folder .tree-folder-content {
|
display: none;
|
}
|
.tree-folder.folder-open .tree-folder-content {
|
display: block;
|
}
|
.tree-file-content a {
|
display: inline-block;
|
padding: 2px 8px;
|
}
|
.file-active {
|
background-color: #B4C7E7;
|
}
|
</style>
|
