11.怎么做好一个动态标签页
效果
步骤
1.在Elementui找一个标签页组件
复制粘贴到代码
2.将他写活
将很多页面需要用的方法和变量写入store
editableTabsValue: '2',editableTabs: [{title: '首页',name: 'index',},], addTab(state, tab) {if (state.editableTabs.findIndex(item => item.title === tab.title) === -1) {state.editableTabs.push({title: tab.title,name: tab.name,});state.editableTabsValue = tab.name;}},3.点击事件
点击事件调用这个方法
selectMenu(menu) {this.$store.commit("addTab", menu);},4.优化
优化点1:解决可以重复出现标签的问题
加一个判断
if (state.editableTabs.findIndex(item => item.title === tab.title) === -1) {state.editableTabs.push({title: tab.title,name: tab.name,});state.editableTabsValue = tab.name;}},优化点2:首页不是子路由,所以要专门写一个
<!-- 首页菜单项 --><el-menu-item index="/sys/Index" @click="selectMenu({name:'Index',title:'首页'})"><template #title><i class="el-icon-s-home"></i>首页</template></el-menu-item>优化点3:点击之后他不会进行一个页面的跳转
写一个点击事件
selectMenu(menu) {this.$store.commit("addTab", menu);},
注意的点
因为我们需要再页面渲染完毕之前,将 editableTabsValue和editableTabs进行计算,所以需要写到computed里面,还有如果有get方法,就必须有set方法,否则无法进行删除
computed: {editableTabs: {get() {return this.$store.state.menu.editableTabs;},set(val) {this.$store.state.menu.editableTabs = val}},editableTabsValue: {get() {return this.$store.state.menu.editableTabsValue;},set(val) {this.$store.state.menu.editableTabsValue = val}},},