遵义建设厅网站,网络营销总结及体会,如何做公司自己的网站,中国建筑人才网证书查询一、需求
需要实现效果#xff1a;左侧菜单栏与右侧内容部分联动#xff0c;当点击左侧的菜单#xff0c;右侧会展示对应的tab#xff0c;没有点击时#xff0c;不展示#xff08;如刚进入页面没有点击菜单#xff0c;则没有tab#xff09;#xff1b;点击后没有关闭…一、需求
需要实现效果左侧菜单栏与右侧内容部分联动当点击左侧的菜单右侧会展示对应的tab没有点击时不展示如刚进入页面没有点击菜单则没有tab点击后没有关闭tab再打开其他菜单如测试项目2则测试项目2的tab高亮为选中状态。
实现效果 二、整体实现思路
1.环境vue、element-ui
2.首先在el-tab-pane中是展示的tab如上图的测试项目1、测试项目2。因此我们创建了一个数组activeTabs来储存tab的信息。
:labelgetTabTitle(route.path) 对应的则是tab展示的标题内容我用了一个方法getTabTitle获取路由对应的标题。:nameroute.meta.title 则是与el-tabs下的 v-modelactiveName相对应如果name的值与v-model的值一样则表示当前选中的tab。代码中v-modelactiveName 用于控制 el-tabs 组件的当前活动标签而 :nameroute.meta.title 用于为每个标签指定一个唯一的名称这样就可以通过这个名称来确定当前选中的标签。通过这两个指令影响到同一个数据例如 activeName 和 route.meta.title以达到实现标签切换的效果。当前选中的状态由 tab-clickselectTab 事件处理器决定。当点击一个标签时tab-click 事件会触发 selectTab 方法。在 selectTab 方法中this.activeName 属性根据点击的标签的 meta.title 进行更新。v-modelactiveName 会自动反映这个变化使得 el-tabs 组件根据 activeName 的值来确定哪个标签是当前选中的从而产生高亮效果。 edithandleTabsEdit是为了对tab做一些操作点击 tabs 的新增按钮或 tab 被关闭后触发。
值得注意的是v-modelactiveName、selectTab、 :nameroute.meta.title几个的对应关系以及其数据结构。 el-tabsv-modelactiveNameeditableedithandleTabsEdittab-clickselectTabel-tab-panev-for(route, index) in activeTabs:keyindex:labelgetTabTitle(route.path):nameroute.meta.title/el-tab-pane/el-tabs
三、我遇到的问题
1.数据结构问题一开始拿到的只是name或label、path这样是不行的最好还是拿到当前对应菜单栏的完整router方便我们操作。
2.点击菜单栏对应的tab没有高亮但内容显示了
3.点击关闭tabtab关闭了但下面的内容没有关闭没有跳转到下一个剩余tab的内容。
4.点击tab之间相互切换功能是正常的页面内容切换但存在问题tab没有高亮有时候要点击两次才会高亮判段问题是出在没有更新调用selectTab。
四、具体代码
templatesection classapp-mainel-tabsv-modelactiveNameeditableedithandleTabsEdittab-clickselectTabel-tab-panev-for(route, index) in activeTabs:keyindex:labelgetTabTitle(route.path):nameroute.meta.title/el-tab-pane/el-tabstransition namefade-transform modeout-in //展示具体页面内容content //自定义组件div classrouter-inner-containerrouter-view v-showactiveName :keykey / //v-showactiveName非常重要注意不要用v-if用来与当前tab对应即关闭tab也关闭当前内容。/div/content/transition/section
/templatescript
import { mapGetters } from vuex; //引入vuex来拿到我的所有菜单路由export default {name: AppMain,props: {noTag: {type: Boolean,default: false},noMap: {type: Boolean,default: false}},data() {return {activeName: null, // 默认选中第一个 tabactiveTabs: [] // 存储当前显示的 tab};},computed: {...mapGetters([sidebar, sidebarRouters]), //菜单所有路由sidebarRouterskey() {return this.$route.path;},isStatisticsView() {if (this.$route.path /home/index) {return true;} else {return false;}}},methods: {selectTab(tab, event) {if (Array.isArray(tab) tab.length 0) { //由于数据结构问题做的判段拿到activeName this.activeName tab[0].meta.title;} else if (typeof tab object tab.meta) {this.activeName tab.meta.title;} else if (Array.isArray(tab) !tab.length 0) {this.activeName ; //当所有tab都关闭时关闭所有内容否则页面会tab都关闭了但还有最后一个关闭的tab的页面内容。}},handleTabsEdit(targetName, action) {// 处理标签页编辑事件if (action remove) {// 删除标签页this.removeTab(targetName);}},removeTab(targetName) {const tabs this.activeTabs;const index tabs.findIndex((tab) tab.meta.title targetName);if (index ! -1) {tabs.splice(index, 1);this.selectTab(tabs, event); //很重要更新activeName否则删除后不会切换下一个对应tab也不会切换页面内容}},updateActiveTabs() {const currentPath this.$route;// 判断对象是否在 activeTabs 中存在const existsInTabs this.activeTabs.some((tab) tab.hasOwnProperty(path) tab.path currentPath.path);if (!existsInTabs) {// 如果当前路由不在 activeTabs 中将其添加进去this.activeTabs.push(currentPath);}this.selectTab(currentPath, event); //很重要更新activeName否则切换菜单栏时对应的tab不会高亮不会切换},findMatchingRoute(routes, targetPath) { //为了处理数组的for (const route of routes) {if (route.path targetPath) {return route;}if (route.children route.children.length 0) {const matchingChild this.findMatchingRoute(route.children,targetPath);if (matchingChild) {return matchingChild;}}}return null;},getTabTitle(route) {// 根据路由信息获取对应的标题const matchingRoute this.findMatchingRoute(this.sidebarRouters, route);return matchingRoute ? matchingRoute.meta.title : ;},findMatchingMenu(routes, targetTitle) {// 递归查找匹配的菜单项for (const route of routes) {if (route.meta) {if (route.meta.title targetTitle) {return route;}if (route.children route.children.length 0) {const matchingChild this.findMatchingMenu(route.children,targetTitle);if (matchingChild) {return matchingChild;}}}}return null;}},mounted() {},watch: {$route(to, from) {if (to to.meta !to.meta.noMap) {this.$nextTick(() {this.$refs.jmap.resizeMap();});}// 更新 activeTabsthis.updateActiveTabs();},activeName: {immediate: true,deep: true,handler(val, oldVal) {if (val val ! oldVal) {const matchingMenu this.findMatchingMenu(this.sidebarRouters, val);if (matchingMenu) {this.$router.push({ path: matchingMenu.path }); //切换tab时切换路由来对应想要页面内容}}}}}
};
/scriptstyle langscss
.app-main {/*50 navbar */height: calc(100vh - 50px);width: 100%;position: relative;overflow: hidden;display: flex;flex-direction: column;background: #f3f3f3;.no-header {height: 100vh;}
}
.fixed-header .app-main {padding-top: 60px;
}.single-layout {.app-main {padding: 0px;}
}.map-style .router-inner-container {position: absolute;
}
/stylestyle langscss
// fix css style bug in open el-dialog
.el-popup-parent--hidden {.fixed-header {padding-right: 15px;}
}
.no-header {.float-panel {height: 100vh;}
}
/style
