后台管理系统中选项卡的动态渲染

动态渲染选项卡

1. 其中router-link是为了当点击选项卡时跳转到选项卡所在的列表

2. 选项卡需要动态渲染，其中active是当选中后激活选中的样式

3. 为图标添加点击删除事件

4. 在状态机配置tabMenu（为了动态渲染）

• 需要在tabMenu添加：active、title、path、id四个属性

• 为了动态渲染组件，在mutations里面写addTabMenuData方法

1. 在动态添加选项卡时需要判断选项卡是否重复（复杂的逻辑不写在mutations中）

2. addTabMenuData方法在将就收到的数据push到state里面之前先将state.tabMenu中的active变为false

注意

这里将active变为false是因为我们点击菜单就往tabMenu中增加点击的菜单，如果不将其改为false，则点击下一个菜单，上个菜单还是被激活的样式。

 addTabMenuData(state,obj){//先遍历tabMenu，然后将里面的元素的active属性变为flase，然后再pushstate.tabMenu.forEach(item=>item.active=false)state.tabMenu.push(obj)},

5. 在菜单页面添加check点击事件，为的是将菜单的名字，id，地址，权限、状态（active）全部传给mutation里面addTabMenuData的方法

注意

这里需要将active设置为true，因为当点击菜单时，触发点击后的样式

c1：判断菜单是否重复，使用find，当checkItme里面有元素说明菜单重复

c2: 通过commit给addTabMenuData传参

 constcheckItem=tabMenu.find(element=>element.title==item.title)if(checkItem){this.$message({message: `${item.title}已经被选择了`,type: 'warning'});}else{this.$store.commit('addTabMenuData',obj)}

6. 在选项卡组件中根据$store.state.tabMenu拿取数据，然后根据数据动态渲染

状态机的代码:

 importVuefrom'vue';importVuexfrom'vuex';import$httpfrom'../request/http'//挂载插件Vue.use(Vuex)​exportdefaultnewVuex.Store({state:{tabMenu:[//首页默认存在，所以保存首页{_id:1,active:true,title:'首页',path:'/home'},]},​mutations:{//mutation保证一个原则，尽量不要将业务写到里面//点击菜单后动态往tabmenu数组中增加一个菜单addTabMenuData(state,obj){//先遍历tabMenu，然后将里面的元素的active属性变为flase，然后再pushstate.tabMenu.forEach(item=>item.active=false)state.tabMenu.push(obj)},deleteTabMenuData(state,id){constnewTabMenu=state.tabMenu.filter(item=>item._id!=id)newTabMenu[newTabMenu.length-1].active=truestate.tabMenu=newTabMenu}},})

选项卡的代码：

 <template><divclass="box"><ul><liv-for="item in $store.state.tabMenu":key="item._id":class="{active:item.active}">​<router-linkv-if="item.path"class="menu" :to="item.path"><span>{{item.title}}</span></router-link>​<i@click="deleteTab(item._id)"class="el-icon-close"></i>​</li></ul></div></template>​<script>exportdefault {methods:{deleteTab(id){this.$store.commit('deleteTabMenuData',id)consttabMenus=this.$store.state.tabMenuconstlastTabMenu=tabMenus[tabMenus.length-1];this.$router.push({path:lastTabMenu.path})}}}</script>