vue结合elementUI实现tag多标签页

点击左侧菜单栏，会打开一个相应的tag标签页点击tag标签可以在不同tag之间切换
如图：

以上图片的布局如下：

<el-container><BaseAside /><el-main><el-header><AppTag /></el-header><el-main class="el-main-content"><router-view></router-view></el-main><el-footer><BaseFooter /></el-footer></el-main></el-container>

做题思路

红框中的tags标签应该是一个数组，每当点击左侧菜单栏时，tags数组中存在当前标签则return，否则push
根据当前tags的url与当前页面的$router.path相互比较，相等则添加高亮
点击当前tags如果是最后一个标签则路由跳转至上一个，否则路由跳转至下一个
点击当前tags跳转至相应的路由

具体描述

左侧菜单栏代码实现：
通过点击左侧菜单栏将当前点击的菜单存储在vuex中

// BaseAside.vue
<template><div class="base-aside"><el-menu class="el-menu-vertical-demo" background-color="#fff" text-color="#666"active-text-color="#345ACF" router><el-submenu v-for="(menu, index) in menuData" :key="index" :index="index"><template slot="title"><i :class="[menu.icon]"></i><span>{{menu.name}}</span></template><el-menu-item v-for="(item, i) in menu.children" :key="index+'-'+i":index="item.url" @click="clickMenu(item)"><span>{{item.name}}</span></el-menu-item></el-submenu></el-menu></div></template><script>export default {name: 'base-aside',data() {return {menuData: [],isCollapse: false}},created() {this.initMenu();},methods: {/*** 初始化菜单数据*/initMenu() {this.menuData = [{icon: 'el-icon-postcard',name: '授信管理',url: "/",children: [{name: "授信审核",url: '/risk/riskCredit',}]},{icon: 'el-icon-tickets',name: '订单管理',url: "/",children: [{name: "订单管理",url: '/stock/coreStockList',}]},{icon: 'el-icon-document-checked',name: '合同管理',url: "/",children: [{name: "订单合同",url: '/contract/coreContractList',}]},//省略 ...];},// 点击菜单clickMenu(value) {//通过vuex将数据存储在store中this.$store.commit('mutationSelectTags', value)}}}</script>
<style lang="less" scoped>
.base-aside{width: auto;height: 100%;/deep/.el-menu-vertical-demo {height: 100%;border: none;&:not(.el-menu--collapse) {width: 200px;height: 100%;overflow: auto;}li {width: 100%;}.menu-title {color: #666;}.el-submenu__title:hover {background: #eaeefa !important;}.el-menu-item.is-active {background: #eaeefa !important;}.el-menu-item.is-active::before {position: absolute;left: 0;width: 3px;height: 100%;background: #345acf !important;content: "";display: inline-block;}.el-menu-item:hover {background: #eaeefa !important;color: #345acf !important}//当侧边栏收起时的样式.el-menu--popup-right-start {.el-menu-item:hover {width: 100%;}.is-active {width: 100%;background: #eaeefa !important;}}}.menu-title {color: #666;}.el-menu-item.is-active{background: #eaeefa !important;}/deep/.el-menu-item.is-active::before {position: absolute;left: 0;width: 3px;height: 100%;background: #345acf !important;content: "";display: inline-block;}.el-menu-item:hover {background: #eaeefa !important;color: #345acf !important}/deep/.el-submenu__title:hover {background: #eaeefa !important;}//当侧边栏收起时的样式.el-menu--popup-right-start .el-menu-item:hover{width: 100%;}.el-menu--popup-right-start .is-active{width: 100%;background: #eaeefa !important;}.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;height: 100%;overflow: auto;}}</style>

//mutations.js
const mutations = {/*** 选择tag标签*/mutationSelectTags(state, data){let result = falsefor(let i=0; i<state.stateTagsList.length;i++){if(state.stateTagsList[i].url == data.url){return result = true}}result === false ? state.stateTagsList.push(data) : ''},/*** 关闭tag标签*/mutationCloseTag(state, data){let result = state.stateTagsList.findIndex(item => item.url === data.url)state.stateTagsList.splice(result, 1)}
}
export default mutations

AppTag组件实现：

// AppTag组件
<template><div class="app-tag"><el-tag closable size="medium" v-for="(tag,index) in tags" :key="tag.name" :disable-transitions="true":effect="$route.path === tag.url ?'dark':'plain'" @close="handleClose(tag,index)" @click="handleClick(tag)">{{tag.name}}</el-tag></div>
</template>
<script>import { mapState,mapMutations } from 'vuex';export default {name: 'app-tag',data() {return {tags: []}},created() {//stateTagsList是state.js中的存放tags数组的key，stateTagsList的值默认为空数组this.tags = this.stateTagsList;},computed: {...mapState(['stateTagsList'])},methods: {...mapMutations({close: 'mutationCloseTag'}),handleClose(tag, index) {if (this.tags.length === 1) { // 如果只有一个标签则不能关闭return}this.close(tag) // 删除当前tagif (this.$router.path === tag.url) { // 如果关闭的标签不是当前路由的话，不做路由跳转return} else {if (index === (this.tags.length - 1)) { // 关闭最后一个标签,则路由跳转至最后一个this.$router.push(this.tags[index].url)} else { // 路由跳转至下一个标签页if(index===0){this.$router.push(this.tags[0].url)}else{this.$router.push(this.tags[index - 1].url)}}}},// 点击tags具体标签handleClick(tag) {this.$router.push(tag.url)}}}
</script><style lang="less" scoped>
.app-tag{.el-tag {cursor: pointer;}
}</style>

以上就实现了tags标签页
但是也会遇到一个问题：
每当刷新页面，vuex中的state数据便不存在，导致tags数组为空。。那如何解决这个问题呢？
点击查看这里

多谢点赞和关注！

vue结合elementUI实现tag多标签页相关推荐

Vue+ElementUI+Tabs实现选项卡|标签页|美化标签页面|局部替换样式|好看的标签页|选项卡
因为elementUI自带的标签页实在太丑了,所以给他美化了以下,样式截图如下 1.使用 css 父级选择器来限制样式覆盖的范围, 不然会全局修改的代码中最外层的样式 class="hom ...
Vue使用Element-UI时点击下一页回到顶部（锚点）
用了很多方法都不起作用,scroll就像死了一样一直是0.最后在<el-backtop>组件中找到他的底层方法,直接调用这个方法可以实现回到顶部,或者说回到任意锚点 el-backtop ...
034_Tabs标签页
1. Tabs标签页 1.1. Tabs标签页分隔内容上有关联但属于不同类别的数据集合. 1.2. Tabs Attributes 参数说明类型可选值默认值 value / v-model 绑 ...
vue 循环tabs 标签页组件_Vue render函数实战--实现tabs选项卡组件
用过Element ui库的童鞋肯定知道组件,简单.好用.可以自定义标签页,不知道广大童鞋们在刚开始使用组件的时候有没有想过它是如何实现的?我咋刚开始使用组件的时候就有去想过,也想去实现一个超级简单的 ...
elementUI设置标签页
思路: 1.在vuex中存储点击过的标签页 2.当路由刷新时,将路由添加到vuex中,并判断当前路由是否已经再标签页列表中 3.关闭标签页时,将vuex中的路由删除代码: vuex中保存点击过的路由 ...
vue的多标签页实现
记录一个vue的后台管理项目-多标签组件的实现: 效果图大概是这样的: 点击左侧的菜单栏,会打开相应的标签页,这些标签可以关闭,可以切换: 使用的框架是vue,使用的UI库是element,另外还使用 ...
vue实现多个tab标签页的切换与关闭
1.实现效果 2.实现原理 vuex,实现对当前激活项,当前tab列表,当前tab的translateX,当前缓存页,当前路由的状态管理. 将vuex中的数据保存到sessionStorage中,避免 ...
基于Vue, Vuex 和 ElementUI 构建轻量单页Hexo主题Lite
Hexo Theme Lite Keep Calm, Lite and Writing. light single page blog application theme, using Vue, Vu ...
Vue：利用Vue生成的网页，在浏览器中的标签页中的图标与标题怎么修改为自己的？
Vue:利用Vue生成的网页,在浏览器中的标签页中的图标与标题怎么修改为自己的? 在解决这个问题的时候,在网上搜到了许多答案,可以说是众说纷纭,作者结合了多个答案,最后解决了这个问题,下面把用到的资源 ...

vue结合elementUI实现tag多标签页

vue结合elementUI实现tag多标签页

做题思路

具体描述

vue结合elementUI实现tag多标签页相关推荐

最新文章

热门文章