Element UI Collapse + GmLayerTree 手風琴效果

1、源碼

<template>
    <div class="left-tree">
        <el-collapse class="tree-collapse" accordion v-model="activeName">
            <el-collapse-item ref="clooapseItem" v-for="(tree, i) of treeNames" :name="i.toString()" :key="tree.name" :title="treeNames[i]" >
                <gm-layer-tree 
                    ref="layerTree"
                    class="layer-tree"
                    :id="'tree0' + i"
                    :expandLevel="expandLevel" 
                    :classNames="classNames"    
                    :treeNodes="treeNodes[i]" 
                    @nodeCheck="nodeCheck" >
                </gm-layer-tree>
            </el-collapse-item>            
        </el-collapse>
    </div>
</template>
<script>
import { GmLayerTree } from "mapgis-gm-webcomponet-base"

export default {
    components: {
        GmLayerTree
    },
    data() {
        return {
            // 默認打開的面板
            activeName: '0',
            // 樹名
            treeNames: [],
            // 樹節點
            treeNodes: [],
            // 展開幾級
            expandLevel: 3,
            //自定義節點樣式
            classNames: {
                folder: 'folder-icon',
                folderOpened: 'folder-opened-icon',
                document: 'document-icon'
            }
        }
    },
    methods: {
        //樹節點checked事件
        nodeCheck (tnode, checked, indeterminate) {
            this.$emit('nodeCheck', tnode, checked);
        },
    },
    created() {
        let trees = Cfg_Tree;
        for(let i = 0, len = trees.length; i < len; i++) {
            let tree = trees[i];
            this.treeNames.push(tree.name);
            this.treeNodes.push(tree.children);
        }
    },
    mounted() {
        // 設置 max-height 這樣在超出高度時再出現scroll
        let maxHeight = document.documentElement.clientHeight - (50 * this.treeNames.length) - 60 + 'px';
        document.getElementsByClassName('el-collapse-item__wrap')[0].style.maxHeight = maxHeight;

        //高度監聽
        window.addEventListener('resize', () => {
            // 設置 max-height 這樣在超出高度時再出現scroll
            let maxHeight = document.documentElement.clientHeight - (50 * this.treeNames.length) - 60 + 'px';
            document.getElementsByClassName('el-collapse-item__wrap')[0].style.maxHeight = maxHeight;
        })

    }
}
</script>
### 2、樹配置
<style lang="stylus" scoped>
@import '../assets/stylus/base.styl';
.left-tree {
    $absolutePosition()
    width: $treeWidth;
    .tree-collapse {
        $absolutePosition()
        overflow: hidden;
        .layer-tree {
            width: 250px;
            overflow: auto;
        }
    }
}
</style>
<style lang="stylus">
.left-tree {
    .el-icon-arrow-right {
        transform: rotate(180deg);
    }
    .el-icon-arrow-right:before {
        content: url('../assets/images/expand.png');
    }
    .el-collapse-item__header {
        padding-left 5px
        background rgb(230,235,241);
        border-bottom solid white 1px
    }
    .is-active {
        background rgb(197, 227,255);
        transform: rotate(0deg);
    }
    .el-collapse-item__wrap {
        overflow: auto;
        background #f6f6f6
    }
    .el-collapse-item__content {
        background rgb(246, 246, 246);
    }    
    .folder-opened-icon {
        background: url('../assets/images/folderOpened.png');
    }
    .folder-icon {
        background: url('../assets/images/folder.png');
    }
    .document-icon {
        background: url('../assets/images/document.png');
    }
    .el-tree {
        background: rgba(0,0,0,0);
    }
}
</style>

// 二維樹配置
const Cfg_Tree = [
    {
        name: '地球化學調查點',
        children: [{
            name: '地球化學調查點',
            children: [
            { 
                name: '基礎底圖', 
                children: [
                     { 
                        name: '地質圖', 
                        children: [
                            {
                                name: '地質取樣',
                                value: 'nd_dizhiquyang'
                            },
                            {
                                name: '水樣點',
                                value: 'nd_shuiyangdian'
                            },
                            {
                                name: '重金屬',
                                value: 'nd_zhongjinshu'
                            },
                            { name: '基礎數據01', value: '' },
                            { name: '基礎數據02', value: '' },
                            { name: '基礎數據01', value: '' },
                            { name: '基礎數據02', value: '' },
                            { name: '基礎數據01', value: '' },
                            { name: '基礎數據02', value: '' },
                            { name: '基礎數據01', value: '' },
                            { name: '基礎數據02', value: '' },
                            { name: '基礎數據01', value: '' },
                            { name: '基礎數據02', value: '' },
                            { name: '基礎數據01', value: '' },
                            { name: '基礎數據02', value: '' },
                            { name: '基礎數據01', value: '' },
                            { name: '基礎數據02', value: '' },
                            { name: '基礎數據01', value: '' },
                            { name: '基礎數據02', value: '' },
                            { name: '基礎數據01', value: '' },
                            { name: '基礎數據02', value: '' },
                            { name: '基礎數據03', value: '' }
                        ] 
                    }
                ] 
            },
            { 
                name: '1 : 1 萬調查點', 
                children: [
                    { name: '基礎數據01', value: '1' },
                    { name: '基礎數據02', value: '2' },
                    { name: '基礎數據03', value: '3' }
                ] 
            },
            { 
                name: '1 : 5 萬調查點', 
                children: [
                    { name: '基礎數據01', value: '1' },
                    { name: '基礎數據02', value: '2' },
                    { name: '基礎數據03', value: '3' }
                ] 
            },
            { 
                name: '1 : 10 萬調查點', 
                children: [
                    { name: '基礎數據01', value: '1' },
                    { name: '基礎數據02', value: '2' },
                    { name: '基礎數據03', value: '3' }
                ] 
            },
            { 
                name: '1 : 50 萬調查點', 
                children: [
                    { name: '基礎數據01', value: '1' },
                    { name: '基礎數據02', value: '2' },
                    { name: '基礎數據03', value: '3' }
                ] 
            },
            { 
                name: '1 : 100 萬調查點', 
                children: [
                    { name: '基礎數據01', value: '1' },
                    { name: '基礎數據02', value: '2' },
                    { name: '基礎數據03', value: '3' }
                ] 
            }
        ]
        }]
    },
    {
        "name": '地球化學圖',
        "children": [
            {
                "name": '地球化學圖',
                "children": [
                    { "name": 'X 元素地球化學圖', value: '222' },
                    { "name": '某某地球化學圖', "value": '333' },
                    { "name": '圖層', "value": '444' }
                ]
            }
        ]
    },
    {
        name: '地球化學評價結果圖',
        children: [
            {
                name: '地球化學評價結果圖',
                children: [
                    { name: 'X 元素等值線圖', value: '555' },
                    { name: '某某評價結果圖', value: '666', key: '1'},
                    { name: '圖層', value: '777', key: '2' }
                    
                ]
            }
        ]
    }
]