From 9b8bf853abf6bcab5592913508d8ec3cb15c2440 Mon Sep 17 00:00:00 2001
From: whychdw <49690745@qq.com>
Date: 星期三, 24 七月 2019 14:13:10 +0800
Subject: [PATCH] 树列表 功能完善
---
src/components/HTree.vue | 130 ++++++++++++++++++++++++++++++++++++-------
1 files changed, 108 insertions(+), 22 deletions(-)
diff --git a/src/components/HTree.vue b/src/components/HTree.vue
index 3924245..f040474 100644
--- a/src/components/HTree.vue
+++ b/src/components/HTree.vue
@@ -1,36 +1,64 @@
<template>
<div class="h-tree-wrapper">
- <div class="h-tree">
- <div class="tree-folder"
- v-for="(item, key) in data" :key="key"
- :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">
- <span class="mrr16">-</span><a href="javascript:;">{{children.txt}}</a>
+ <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>
- </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 {}
+ return {
+ tree: []
+ }
+ },
+ watch:{
+ data: {
+ handler: function(obj) {
+ this.setTree();
+ },
+ deep: true
+ }
},
filters: {
typeFilter: function(childrens) {
@@ -42,15 +70,66 @@
}
},
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) {
- var open = this.data[key].open;
- this.data[key].open = open?false:true;
+ 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;
+ // 閬嶅巻瀛愬睘鎬ф坊鍔燼ctive灞炴��
+ for(var k=0; k<childrens.length; k++) {
+ var children = childrens[k];
+ // 璁剧疆鏄惁灞曞紑
+ if(typeof(children.active) == 'undefined') {
+ children.active = false;
+ }
+ }
+
+ }
+ this.tree = data;
}
},
- computed: {
- getType: function() {
-
- }
+ mounted: function() {
+ this.setTree();
}
}
</script>
@@ -82,4 +161,11 @@
.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>
--
Gitblit v1.9.1