首页 前端知识 VUE实现TAB切换不同页面

VUE实现TAB切换不同页面

2024-09-01 23:09:27 前端知识 前端哥 748 762 我要收藏

VUE实现TAB切换不同页面

实现效果

在这里插入图片描述

资源准备

ReceiveOrderList,
TodoListMulti,
SignList
这三个页面就是需要切换的页面

首页代码

<template>
<div>
<el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
<el-tab-pane name="ReceiveOrderList">
<span slot="label"> <i class="el-icon-date"></i> <el-badge :value="9999" :max="99" class="item">待接单</el-badge></span>
</el-tab-pane>
<el-tab-pane name="TodoListMulti">
<span slot="label"> <i class="el-icon-truck"></i> <el-badge :value="31" :max="99" class="item">待发货</el-badge></span>
</el-tab-pane>
<el-tab-pane name="SignList">
<span slot="label"> <i class="el-icon-edit-outline"></i> <el-badge :value="21" :max="99" class="item">待签收</el-badge></span>
</el-tab-pane>
</el-tabs>
<keep-alive>
<component :is="activeTabComponent"></component>
</keep-alive>
</div>
</template>
<script>
import ReceiveOrderList from '@/views/orderCenter/receiveOrderList'
import TodoListMulti from '@/views/dispatch/todoListMulti'
import SignList from '@/views/dispatch/signList'
export default {
data() {
return {
activeTab: 'ReceiveOrderList',
componentMap: {
ReceiveOrderList: ReceiveOrderList,
TodoListMulti: TodoListMulti,
SignList: SignList
}
}
},
computed: {
activeTabComponent() {
return this.componentMap[this.activeTab]
}
},
methods: {
handleTabClick(tab) {
this.activeTab = tab.name
}
}
}
</script>
复制

如果不考虑勋章的话,可以把代码删除掉;
这样就可以实现一个切换不同tab显示不同页面的效果:类似与在iframe中动态变化内容;
此方法的优点就是避免不同页面相同变量引发的混乱,如果是对已有的页面进行整合效果更好!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17420.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!