当前位置：首页 > news >正文

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

news 来源：原创 2024/9/29 21:20:27

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为1componentnext: "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>