树列表 功能完善

whychdw

2019-07-24 9b8bf853abf6bcab5592913508d8ec3cb15c2440

 src/components/HTree.vue

@@ -1,9 +1,11 @@
<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}">
        <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>
@@ -12,25 +14,51 @@
                <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>
                            <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 {}
        return {
            tree: []
        }
    },
    watch:{
        data: {
            handler: function(obj) {
                this.setTree();
            },
            deep: true
        }
    },
    filters: {
        typeFilter: function(childrens) {
@@ -42,15 +70,66 @@
        }
    },
    methods: {
        open: function(key) {
            var open = this.data[key].open;
            this.data[key].open = open?false:true;
        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;
        }
    },
    computed: {
        getType: function() {
        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>
@@ -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>