Element UI Collapse + GmLayerTree 手风琴效果

AvatarGiser

一、源码

<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>
### 二、树配置
<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' }
                    
                ]
            }
        ]
    }
]
阅读 128
0 声望
0 粉丝
0 条评论
0 声望
0 粉丝
宣传栏