当前位置: 首页 > news >正文

VUE实现TAB切换不同页面

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中动态变化内容;
此方法的优点就是避免不同页面相同变量引发的混乱,如果是对已有的页面进行整合效果更好!

相关文章:

VUE实现TAB切换不同页面

VUE实现TAB切换不同页面 实现效果 资源准备 ReceiveOrderList, TodoListMulti, SignList 这三个页面就是需要切换的页面 首页代码 <template><div><el-tabs v-model"activeTab" type"card" tab-click"handleTabClick"><…...

C++ 80行 极简扫雷

一共5346个字符&#xff0c;MinGW编译通过&#xff08;强烈不建议写这种代码&#xff01;&#xff01;&#xff01;&#xff09; 压行规则&#xff1a;一行不超过80个字符 代码&#xff1a; #include<windows.h> #include<stdio.h> #include<time.h> #def…...

常见VPS服务器附加组件一览

网络主机行业竞争非常激烈&#xff0c;因此主机服务提供商竭尽全力为客户提供完整的解决方案&#xff0c;其中包含构建和管理在线项目所需的一切。但客户通常有特定需求&#xff0c;因此需要不同的附加组件。在管理自己的网络服务器时尤其如此。 今天&#xff0c;我们将介绍您…...

Electron 使用Electron-build 进行打包

看完下面两篇就可以完成&#xff01; 基于vue3vite的web项目改为Electron桌面应用&#xff08;一&#xff09;_vue3转electron-CSDN博客 将web项目打包成electron桌面端教程&#xff08;二&#xff09;vue3vitets_vue3 打包桌面端-CSDN博客 打包报错 1. 首先确定依赖包 npm …...

Springboot+Websocket+Security+Vue 实现弹幕推送功能

后端部分 (Spring Boot) 1. 创建一个 Spring Boot 项目 创建一个新的 Spring Boot 项目并添加以下依赖&#xff1a; <dependencies><!-- Spring Boot Starter Web --><dependency><groupId>org.springframework.boot</groupId><artifactId…...

LangChain之网络爬虫

网络爬虫 概述 网络爬虫是LangChain中的一项关键功能&#xff0c;允许用户自动从互联网上收集信息。这项功能对于研究和数据收集尤其有价值&#xff0c;因为它可以大幅减少手动搜索和信息整理的工作量。 从网络收集内容有几个主要组件&#xff1a; Search搜索&#xff1a;使用…...

VueRouter 相关信息

VueRouter 是Vue.js官方路由插件&#xff0c;与Vue.js深度集成&#xff0c;用于构建单页面应用。构建的单页面是基于路由和组件&#xff0c;路由设定访问路径&#xff0c;将路径与组件进行映射。VueRouter有两中模式 &#xff1a;hash 和 history &#xff0c;默认是hash模式。…...

[环境配置]Pycharm:Failed to start [PowerShell.exe]

解决方法&#xff0c;点Local旁边的 号&#xff0c;点击Command Prompt&#xff0c;即可在Pycharm中呼出控制台。 如果要修改Command Prompt的启动时访问的cmd.exe的路径&#xff0c;可以去Settings→Tools→Terminal中&#xff0c;修改Shell Path实现&#xff0c;改为cmd.exe…...

搜狗爬虫(www.sogou.com)IP及UA,真实采集数据

一、数据来源&#xff1a; 1、这批搜狗爬虫&#xff08;www.sogou.com&#xff09;IP来源于尚贤达猎头网站采集数据&#xff1b; ​ 2、数据采集时间段&#xff1a;2023年10月-2024年7月&#xff1b; 3、判断标准&#xff1a;主要根据用户代理是否包含“www.sogou.com”和IP核实…...

北京青蓝智慧科技ITSS服务经理:长安链ChainBridge“链桥”问世 加速国家级区块链网络互联互通

8月5日&#xff0c;据国家区块链技术创新中心消息&#xff0c;我国首个完全自主控制的区块链软硬件技术系统——长安链&#xff0c;正式推出了全场景技术平台ChainBridge“链桥”。 此平台能够支持所有异构和同构的区块链进行协作&#xff0c;满足跨领域、跨地域、跨行业及跨层…...

音视频入门基础:WAV专题(5)——FFmpeg源码中解码WAV Header的实现

音视频入门基础&#xff1a;WAV专题系列文章&#xff1a; 音视频入门基础&#xff1a;WAV专题&#xff08;1&#xff09;——使用FFmpeg命令生成WAV音频文件 音视频入门基础&#xff1a;WAV专题&#xff08;2&#xff09;——WAV格式简介 音视频入门基础&#xff1a;WAV专题…...

爬虫:csv存储:写入和读取

目录 csv写入 csv读取 csv写入 import csv# data [ # (tf, 20, 180), # (dl, 20, 170), # (hc, 18, 190) # ] # header (姓名,年龄,身高) # # # csv写入数据会默认写一行隔一行 newline就是让它不要有空行 # with open(text.csv,w,encodingutf8,newline) as f:…...

Opencv-绘制几何图形

1. 绘制圆形 1.1 circle()函数原型 void cv::circle(InputOutputArray img, Point center, int radius, const Scalar & color, int thickness 1, int lineType LINE_8, int shift 0 ) img&#xff1a;需要绘制圆形的图像。 center&#xff1a;圆形的圆心位置坐标。 …...

ElasticSearch安装与集群部署

ElasticSearch安装与集群部署 很多小伙伴第一次接触ElasticSearch的时候是一脸愁容,这个东西他怎么用啊,不知道从哪里安装,那我们今天就着重从哪里下载?怎么下载?怎么安装?来研究一下吧! windows下载安装ElasticSearch 下载地址&#xff1a;https://www.elastic.co/cn/do…...

盘点12款企业常用源代码加密软件,源代码防泄密很重要!

在当今的商业环境中&#xff0c;源代码作为企业的核心资产之一&#xff0c;其安全性不容忽视。源代码的泄露可能导致企业丧失竞争优势、面临法律诉讼甚至经济损失。因此&#xff0c;选择合适的源代码加密软件成为企业保护知识产权和核心技术的关键步骤。 1. 安秉源代码加密软件…...

文件上传和下载

要想实现文件上传和下载&#xff0c;其实只需要下述代码即可&#xff1a; 文件上传和下载 import cn.hutool.core.io.FileUtil; import cn.hutool.core.util.StrUtil; import com.example.common.Result; import org.springframework.web.bind.annotation.*; import org.sprin…...

机械学习—零基础学习日志(高数22——泰勒公式理解深化)

核心思想&#xff1a;函数逼近 在泰勒的年代&#xff0c;如果想算出e的0.001次方&#xff0c;这是很难计算的。那为了能计算这样的数字&#xff0c;可以尝试逼近的思想。 但是函数又不能所有地方都相等&#xff0c;那退而求其次&#xff0c;只要在一个极小的范围&#xff0c;…...

Java | Leetcode Java题解之第318题最大单词长度乘积

题目&#xff1a; 题解&#xff1a; class Solution {public int maxProduct(String[] words) {Map<Integer, Integer> map new HashMap<Integer, Integer>();int length words.length;for (int i 0; i < length; i) {int mask 0;String word words[i];in…...

科普文:JUC系列之多线程门闩同步器Condition的使用和源码解读

一、概述 条件锁就是指在获取锁之后发现当前业务场景自己无法处理&#xff0c;而需要等待某个条件的出现才可以继续处理时使用的一种锁。 比如&#xff0c;在阻塞队列中&#xff0c;当队列中没有元素的时候是无法弹出一个元素的&#xff0c;这时候就需要阻塞在条件notEmpty上…...

Stable Diffusion绘画 | 图生图-基础使用介绍—提示词反推

按默认设置直接出图 拖入图片值图生图框中&#xff0c;保持默认设置&#xff0c;直接生成图片&#xff0c;出图效果如下&#xff1a; 因为重绘幅度0.7&#xff0c;所出图片与原图有差异&#xff0c;但整体的框架构图与颜色与原图类似。 输入关键词后出图 在正向提示词中输入…...

【DeepSeek-R1代码相似度引擎解密】:3层语义比对机制、Token归一化偏差修正与Jaccard阈值黄金分割点

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;DeepSeek代码重复检测 DeepSeek-R1 模型在训练过程中引入了严格的代码去重机制&#xff0c;其核心目标是消除训练语料中语义等价或高度相似的代码片段&#xff0c;从而提升模型对真实编程模式的学习能力与泛化…...

配置OpenClaw Agent使用Taotoken作为后端模型提供商

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 配置OpenClaw Agent使用Taotoken作为后端模型提供商 基础教程类&#xff0c;指导希望使用OpenClaw等Agent工具的开发者&#xff0c…...

在Hermes Agent项目中接入Taotoken作为自定义模型供应商

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在Hermes Agent项目中接入Taotoken作为自定义模型供应商 基础教程类&#xff0c;针对使用Hermes Agent框架的开发者&#xff0c;详…...

榨干Codex!OpenAI工程师亲授Codex真正用法

你可能把 Codex 当编程助手用&#xff0c;改改代码&#xff0c;跑跑测试。但它的能力远不止于此。OpenAI 的客户支持工程师 Jason&#xff08;jxnlco&#xff09;告诉你&#xff0c;Codex 其实是一套完整的电脑工作系统&#xff0c;从语音输入到自动化&#xff0c;从浏览器操控…...

Unity项目DrawCall降不下来?试试用Mesh Baker合并贴图集,保姆级图文教程

Unity性能优化实战&#xff1a;用Mesh Baker合并贴图集降低DrawCall全流程解析当你的Unity项目帧率开始卡顿&#xff0c;Profiler里DrawCall数字居高不下时&#xff0c;合并贴图集往往是解决问题的关键一步。本文将以一个实际项目为例&#xff0c;带你从零开始使用Mesh Baker的…...

别再只用鼠标了!用Leap Motion手势控制Unity游戏,保姆级配置避坑指南(2024版)

2024年Unity手势交互开发实战&#xff1a;Leap Motion从配置到游戏逻辑全解析在游戏开发领域&#xff0c;交互方式的创新往往能带来全新的体验。想象一下&#xff0c;玩家不再需要键盘鼠标&#xff0c;仅凭自然的手部动作就能操控游戏角色——这正是Leap Motion手势识别技术为U…...

多模型聚合平台如何助力网站AIB测试与选型

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 多模型聚合平台如何助力网站AIB测试与选型 对于网站产品经理而言&#xff0c;首页文案的生成质量直接影响用户的第一印象和转化率。…...

万星easy-vibe:描述需求即发布 零基础无需学语法

开源Easy-Vibe是一套开源AI编程学习方案&#xff0c;把学习顺序从先学语法再做项目翻转为直接做项目。文章拆解了项目驱动、提示词编写、AI编辑器和多Agent协作的完整流程&#xff0c;解释了为什么想法比语法更重要。 github上datawhalechina/easy-vibe&#xff1a;它在GitHub…...

国内大学生常用的AI写作辅助平台有哪些?

国内高校学生常用的 AI 写作辅助平台&#xff0c;以本土化全流程工具为主&#xff0c;结合通用大模型与专项功能模块&#xff0c;覆盖选题构思、大纲搭建、初稿撰写、语言润色、降重处理、查重检测及格式排版等关键环节&#xff0c;以下是主流平台详解与对比&#xff1a; 一、本…...

基于LSTM自编码器的家用电器功耗异常检测系统构建指南

1. 项目概述&#xff1a;从能耗洞察到智能干预我们每天都在和各种家用电器打交道&#xff0c;从清晨唤醒你的咖啡机&#xff0c;到深夜还在默默工作的路由器。你有没有想过&#xff0c;这些看似微不足道的设备&#xff0c;其背后隐藏的能耗模式&#xff0c;其实大有文章&#x…...