wx_mini_app/components/sidebar.vue

<template>
<div class="location-area">
    <div class="location-sidebar">
        <div @click="sidebarChange(item, index)" class="location-sidebar-list" :class="{'sidebar-active':index==current}" v-for="(item, index) in dataList" :key="index">
            {{item.name}}
        </div>
    </div>
    <div class="location-content">
        <div class="location-content-list" :class="{'location-content-active':index==lineCurrent}" v-for="(item, index) in dataList[current].children" :key="index" @click="checkSidebar(item, index)">
            {{item.name}}
        </div>

    </div>
    <div class="location-content-child" v-if="checkList.length>0">
        <div class="location-content-list-child" v-for="(item, index) in checkList" :key="index">
            {{item.name}}
        </div>
    </div>
</div>
</template>

<script>
export default {
    props: {
        dataList: {
            type: Array
        }
    },
    data() {
        return {
            checkList: [],
            current: 0,
            lineCurrent: 0
        }
    },
    methods: {
        sidebarChange(item, index) {
            console.log(item);
            this.current = index
            if ( !item.children || item.children.length === 0) {
                this.checkList = [];
            } else {
                try {
                    this.lineCurrent = 0
                    this.checkList = JSON.parse(JSON.stringify(item.children[0].children));
                } catch (e) {
                    this.checkList = [];
                }
            }
            console.log(this.checkList);
        },
        checkSidebar(item, index) {
            this.lineCurrent = index
            console.log(item);
            if (item.children) {
                this.checkList = item.children
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.sidebar-active {
    color: #2979ff;
    // color: #fff;
    border-right: #2979ff 1px solid;
}

.location-content-active {
    color: #2979ff;
    border-right: #2979ff 1px solid;
}

.location-area {
    height: 40vh;
    overflow: hidden;
    display: flex;
    padding: 10px 0;

    .location-sidebar {
        width: 30%;
        height: 100%;
        overflow: auto;
        border-right: 1px solid #f3f3f3;

        // background: #f3f3f3;
        .location-sidebar-list {
            line-height: 50px;
        }
    }

    .location-content-list {
        line-height: 50px;
        padding: 0 10px;
        display: flex;
        text-align: left;
    }

    .location-content {
        flex: 1;
        background: #fff;
        height: 100%;
        overflow: auto;
    }

    .location-content-child {
        width: 50%;
        line-height: 50px;
        border-left: 1px solid #000;
    }
}
</style>