后端返回给前端两个数组,第一个数组是标签页内容,第二个数组是侧边栏内容及侧边栏对应的页面内容,前端根据这两个数组,基于vue+elementui实现点击顶部标签栏,定位到对应侧边栏,点击侧边栏的某一项,显示对应的页面内容
时间: 2024-05-13 22:18:02 浏览: 88
前端实用vue+elementui(前后端分离)
好的,你可以这样实现:
1. 在Vue中,通过v-for指令循环渲染标签页和侧边栏内容,比如:
```html
<!-- 标签页 -->
<el-tabs v-model="activeTab">
<el-tab-pane v-for="(tab, index) in tabs" :label="tab.label" :name="index" :key="index"></el-tab-pane>
</el-tabs>
<!-- 侧边栏 -->
<el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect">
<el-submenu v-for="(menu, index) in menus" :index="index" :key="index">
<template slot="title">{{menu.title}}</template>
<el-menu-item v-for="(subMenu, subIndex) in menu.subMenus" :index="`${index}-${subIndex}`" :key="`${index}-${subIndex}`">{{subMenu.title}}</el-menu-item>
</el-submenu>
</el-menu>
```
2. 在Vue组件中,定义标签页和侧边栏的数据和方法,比如:
```javascript
export default {
data() {
return {
tabs: [
{ label: '标签页1' },
{ label: '标签页2' },
{ label: '标签页3' }
],
activeTab: '0', // 默认选中第一个标签页
menus: [
{
title: '侧边栏1',
subMenus: [
{ title: '侧边栏1-1', content: '侧边栏1-1的内容' },
{ title: '侧边栏1-2', content: '侧边栏1-2的内容' }
]
},
{
title: '侧边栏2',
subMenus: [
{ title: '侧边栏2-1', content: '侧边栏2-1的内容' },
{ title: '侧边栏2-2', content: '侧边栏2-2的内容' }
]
},
{
title: '侧边栏3',
subMenus: [
{ title: '侧边栏3-1', content: '侧边栏3-1的内容' },
{ title: '侧边栏3-2', content: '侧边栏3-2的内容' }
]
}
],
activeMenu: '0-0' // 默认选中第一个侧边栏
}
},
methods: {
handleMenuSelect(index) {
// 处理侧边栏选中事件,获取选中菜单对应的内容
const [menuIndex, subMenuIndex] = index.split('-')
const content = this.menus[menuIndex].subMenus[subMenuIndex].content
// 根据选中的侧边栏内容,新建一个标签页
this.tabs.push({ label: index, content })
this.activeTab = `${this.tabs.length - 1}`
}
}
}
```
3. 在Vue组件中,通过监听标签页的切换事件,动态改变侧边栏和页面内容,比如:
```javascript
export default {
watch: {
activeTab(newIndex, oldIndex) {
// 标签页切换时,更新侧边栏和页面内容
const { content } = this.tabs[newIndex]
if (content) {
const [menuIndex, subMenuIndex] = this.activeMenu.split('-')
const newContent = this.menus[menuIndex].subMenus[subMenuIndex].content
if (newContent !== content) {
this.tabs[newIndex].content = newContent
}
}
}
}
}
```
这样就可以实现点击顶部标签栏,定位到对应侧边栏,点击侧边栏的某一项,显示对应的页面内容了。
阅读全文