VUE2 tab切换导航 展示页面内容(父级子级独立)

图片示例

代码

<template>

    <div class="center">
        <!-- 一级导航 -->
        <div class="menu">
            <div class="menu_list">
                <div v-for="item of List" :key="item.id">
                    <div class="menu_item" @click="onClick(item)" :class="item.id == onActive ? 'active' : 'moren'">
                        {{ item.name }}
                    </div>

                </div>
            </div>
            <!-- 二级导航 -->
            <div class="menu_list">
                <div v-for="TableList of childrenList" :key="TableList.id">
                    <div class="menu_item_son" @click="sonClick(TableList)"
                        :class="TableList.id == onActive ? 'son_active' : 'moren'">{{ TableList.name }}</div>
                </div>
            </div>
        </div>
        <!-- 组件 -->
        <div class="center_body">
            <component :is="componentnext"></component>
        </div>
    </div>

</template>

<script>
import RW03 from "./rw03.11.vue";
...

export default {
    components: {
        RW03,
        ...
    },
    data() {
        return {
            childrenList: [],
            List: [
                {
                    id: 1,
                    name: "RW01",
                    componentnext: "RW01",
                    children: [],
                },
                {
                    id: 2,
                    name: "RW02",
                    componentnext: "RW02",
                    children: [],
                },
                {
                    id: 3,
                    name: "RW03",
                    componentnext: "RW03",
                    children: [
                        { id: 43, name: "RW03.11", componentnext: "RW03" },
                        { id: 4, name: "RW03.12", componentnext: "RW0312" },
                        { id: 5, name: "RW03.51", componentnext: "RW0351" },
                        { id: 6, name: "RW03.52", componentnext: "RW0352" },
                    ],
                },
                ...
            ],
            onActive: "1", // RW01 的id为1
            componentnext: "RW01",
        };
    },
    methods: {
        onClick(item) {
            // console.log(item);
            var _this = this;
            _this.childrenList = item.children;
            _this.onActive = item.id;
            _this.componentnext = item.componentnext;
        },
        sonClick(item) {
            var _this = this;
            _this.onActive = item.id;
            _this.componentnext = item.componentnext;
        },
    },
};
</script>
<style scoped>
.center {
    margin: 10px 20px;
    height: 100%;
}

.menu {
    border: 2px solid #409EFF;
    padding: 10px;
}

.menu_list {
    display: flex;
    flex-wrap: wrap;
}

.menu_item {
    width: 150px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #d8d8d8;
    margin: 5px;
    font-weight: bold;
}

.menu_item_son {
    width: 150px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #F2F6FC;
    margin: 5px;
    font-weight: bold;
}

.active {
    font-weight: bold;
    background-color: #409EFF;
    color: #fff;
}

.son_active {
    font-weight: bold;
    background-color: #67C23A;
    color: #fff;
}

.center_body {
    margin: 20px 0;
}
</style>

原文地址：https://blog.csdn.net/weixin_50639421/article/details/139064290

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！