当前位置： 首页 > article >正文

使用el-tab 实现两个tab切换

article 2026/2/2 4:15:36

1、主页面 index.vue

2、tab1：school.vue

3、tab2：parent.vue

具体代码如下：

<template><div class="app-container"><!-- 使用el-tabs 实现两个组件的切换 --><el-tabs v-model="activeName" type="card" @tab-click="handleClick"><el-tab-pane label="学校端" name="first"><!-- 路由到school.vue--><school></school></el-tab-pane><el-tab-pane label="家长端" name="second"><parent></parent></el-tab-pane></el-tabs></div>
</template><script>
import parent from './parent.vue';
import school from './school.vue';export default {components: { parent, school },name: "CollectStatistics",data() {return {activeName: "first",};},methods: {handleClick(tab, event) {// console.log(tab, event);console.log(this.activeName);},},
};
</script>
<style></style>

参数说明：

  1. el-tabs嵌套el-tab-pane使用
  2. el-tabs的v-model对应el-tab-pane的name
  3. el-tabs的type可以指定为card,border-card
  4. el-tab-pane的label为显示的标签内容，标签的内容在首尾标签内部
  5. el-tabs可以设置closable,editable,addable,分别设置tab-remove,edit,tab-add动态修改标签集合
  6. 还有tab-click钩子
  7. el-tabs中设置tab-position，修改标签位置，可以为top,bottom,left,right

Element - The world's most popular Vue UI framework

相关文章：

使用el-tab 实现两个tab切换

1、主页面 index.vue 2、tab1&#xff1a;school.vue 3、tab2&#xff1a;parent.vue 具体代码如下&#xff1a; <template><div class"app-container"><!-- 使用el-tabs 实现两个组件的切换 --><el-tabs v-model"activeName" typ…...

编程日记 2026/1/26 10:23:30

JAVA--流（Stream）的使用

一、概念 JDK8新特性&#xff0c;简单方便的对集合和数组进行处理。 Stream&#xff08;流&#xff09;是一个来自数据源的元素队列 数据源&#xff1a;流的来源&#xff0c;指的是集合或数组 元素队列&#xff1a;元素是特定类型的对象&#xff0c;形成一个队列 Stream 并…...

编程日记 2025/7/21 22:27:41

使用ExcelJS实现专业级医疗数据导出功能：从数据到Excel报表的完整指南

在现代医疗信息系统中&#xff0c;数据导出是医护人员和行政人员日常工作中的重要需求。本文将详细介绍如何使用ExcelJS库在前端实现专业级的医疗数据导出功能&#xff0c;特别是针对住院缴费记录这类关键业务数据。 功能概述 这个exportExcel函数实现了以下核心功能&#xf…...

编程日记 2025/7/10 21:31:35

使用Pholcus编写Go爬虫示例

想用Pholcus库来写一个Go的爬虫程序。首先&#xff0c;我得确认Pholcus的当前状态&#xff0c;因为之前听说过它可能已经不再维护了。不过用户可能还是需要基于这个库的示例&#xff0c;所以得先提供一个基本的框架。 首先&#xff0c;我应该回忆一下Pholcus的基本用法。Pholc…...

编程日记 2026/1/31 5:16:32

深入解析大型应用架构：以dify为例进行分析

原文&#xff1a;https://juejin.cn/post/7437015214351286309 Dify 是一款开源的大语言模型&#xff08;LLM&#xff09;应用开发平台&#xff0c;旨在简化和加速生成式 AI 应用的创建和部署。 它融合了后端即服务&#xff08;Backend as a Service, BaaS&#xff09;和 LLM…...

编程日记 2025/9/29 21:59:54

单片机实现触摸按钮执行自定义任务组件

触摸按钮执行自定义任务组件 项目简介 本项目基于RT8H8K001开发板 RT6809CNN01开发板 TFT显示屏(1024x600) GT911触摸屏实现了一个多功能触摸按钮组件。系统具备按钮控制后执行任务的功能&#xff0c;可用于各类触摸屏人机交互场景。 硬件平台 MCU: STC8H8K64U&#xff0…...

编程日记 2026/1/26 13:34:16

快速入手-前后端分离Python权限系统 基于Django5+DRF+Vue3.2+Element Plus+Jwt

引用&#xff1a;打造前后端分离Python权限系统 基于Django5DRFVue3.2Element PlusJwt 视频教程 &#xff08;火爆连载更新中..&#xff09;_哔哩哔哩_bibili 说明&#xff1a;1、结合个人DRF基础和该视频去根据自己的项目进行开发。 2、引用该视频中作者的思路去升华自身的项…...

编程日记 2025/8/25 20:58:46

【go】slice的浅拷贝和深拷贝

浅拷贝(Shallow Copy) 浅拷贝是指只复制切片本身的结构&#xff08;指针、长度和容量&#xff09;&#xff0c;而不复制底层数组的元素。 实现方式 直接赋值&#xff1a; slice1 : []int{1, 2, 3} slice2 : slice1 // 浅拷贝切片操作&#xff1a; slice1 : []int{1, 2, 3} s…...

编程日记 2025/8/25 0:35:14

Ai云防护技术解析——服务器数据安全的智能防御体系

本文深度解析AI云防护技术如何通过智能流量分析、动态行为建模、自适应防御策略构建服务器安全体系。结合2023年群联科技实战案例，揭示机器学习算法在识别新型DDoS攻击、加密流量检测、零日漏洞防御中的技术突破，并附Gartner最新防护效果验证数据。 AI驱动的流量特征建模技术…...

编程日记 2026/1/31 1:43:08

科技快讯 | DeepSeek 公布模型新学习方式；Meta发布开源大模型Llama 4；谷歌推出 Android Auto 14.0 正式版

Meta发布开源大模型Llama 4&#xff0c;首次采用“混合专家架构“ 4月6日&#xff0c;Meta推出开源AI模型Llama 4&#xff0c;包括Scout和Maverick两个版本&#xff0c;具备多模态处理能力。Scout和Maverick参数量分别为170亿和4000亿&#xff0c;采用混合专家架构。Meta同时训…...

编程日记 2025/11/15 18:22:37

JSONP跨域访问漏洞

一、漏洞一:利用回调GetCookie <?php$conn new mysqli(127.0.0.1,root,root,learn) or die("数据库连接不成功"); $conn->set_charset(utf8); $sql "select articleid,author,viewcount,creattime from learn3 where articleid < 5"; $result…...

编程日记 2026/1/26 12:22:41

记录一次StarRocks集群迁移的经历

记录一次StarRocks集群迁移的经历 新入职了一家公司，刚去做了两张报表后，接到一个任务，做StarRocks 集群迁移，背景是这样的就是以前是自建的SR，但是这个SR 是给线上业务用的，也就是说不是分析性业务，而是面向产品ToC 的，也了解了一下是因为单表数据量太大了，所以直接…...

编程日记 2026/1/31 9:53:16

图形裁剪算法

1.学习目标 理解区域编码(Region Code&#xff0c;RC) 设计Cohen-Sutherland直线裁剪算法 编程实现Cohen-Sutherland直线裁剪算法 2.具体代码 1.具体算法 /*** Cohen-Sutherland直线裁剪算法 - 优化版* author AI Assistant* license MIT*/// 区域编码常量 - 使用对象枚举…...

编程日记 2026/1/27 17:06:21

Python字典实战: 三大管理系统开发指南（班级+会议+购物车）(附源码)

目录 摘要 一、班级管理系统&#xff08;含成绩模块&#xff09; 1. 功能概述 2. 完整代码与解析 3. 代码解析与亮点 二、会议管理系统 1. 功能概述 2. 完整代码 3. 代码解析与亮点 三、购物车管理系统 1. 功能概述 2. 完整代码 3. 代码解析与亮点 四、总结与扩…...

编程日记 2025/11/2 5:48:58

R 语言科研绘图第 36 期 --- 饼状图-基础

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程日记 2026/1/26 6:38:32

vue 3 从零开始到掌握

vue3从零开始一篇文章带你学习 升级vue CLI 使用命令 ## 查看vue/cli版本&#xff0c;确保vue/cli版本在4.5.0以上 vue --version ## 安装或者升级你的vue/cli npm install -g vue/cli ## 创建 vue create vue_test ## 启动 cd vue_test npm run servenvm管理node版本&#…...

编程日记 2026/1/26 13:16:05

【R语言绘图】圈图绘制代码

绘制代码 rm(list ls())# 加载必要包 library(data.table) library(circlize) library(ComplexHeatmap) library(rtracklayer) library(GenomicRanges) library(BSgenome) library(GenomicFeatures) library(dplyr)### 数据准备阶段 ### # 1. 读取染色体长度信息 df <- re…...

编程日记 2026/1/26 10:46:21

OCR迁移

一、环境 操作系统&#xff1a;Centos57.6 数据库版本&#xff1a;12.2.0.1 场景&#xff1a;将OCR信息从DATA磁盘组迁移到OCR磁盘组 二、操作步骤 1.查看可用空盘 set lin 200 set pagesize 200 col DGNAME format a15 col DISKNAME format a15 col PATH format a20 col N…...

编程日记 2025/12/30 13:14:53

OpenCV 图形API（17）计算输入矩阵 src 中每个元素的平方根函数sqrt()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 描述 计算数组元素的平方根。 cv::gapi::sqrt 函数计算每个输入数组元素的平方根。对于多通道数组&#xff0c;每个通道会独立处理。其精度大约与内置的 …...

编程日记 2025/8/25 6:32:07

python中的in关键字查找的时间复杂度

列表&#xff08;List&#xff09; 对于列表来说&#xff0c; in 运算符的复杂度是 O(n)&#xff0c;其中n是列表的长度。这意味着如果列表中有n个元素&#xff0c;那么执行 in 运算符需要遍历整个列表来查找目标元素。 以下是一个示例&#xff0c;演示了在列表中使用 in 运算…...

编程日记 2025/8/26 11:23:00

Python爬虫第6节-requests库的基本用法

目录 前言 一、准备工作 二、实例引入 三、GET请求 3.1 基本示例 3.2 抓取网页 3.3 抓取二进制数据 3.4 添加headers 四、POST请求 五、响应 前言 前面我们学习了urllib的基础使用方法。不过&#xff0c;urllib在实际应用中存在一些不便之处。以网页验证和Cookies处理…...

编程日记 2026/1/30 16:36:56

什么是可靠性工程师？

一、什么是可靠性工程师&#xff1f; 可靠性工程师就是负责确保产品在使用过程中不出故障、不给客户添麻烦。 你可以理解为是那种“挑毛病的人”&#xff0c;但不是事后挑&#xff0c;是提前想清楚产品在哪些情况下可能会出问题&#xff0c;然后解决掉。 比如&#xff1a; …...

编程日记 2026/1/26 13:58:22

linux (CentOS 10）使用传统程序语言（C）进行编译---主，子程序连接：子程序的编译

1 主程序 rootlocalhost:~/testc/testlink3# cat thanks.c #include <stdio.h> // 声明子程序 void thanks_2(void); int main(void) {printf("Hello World\n");thanks_2(); }2 子程序 rootlocalhost:~/testc/testlink3# cat thanks_2.c #include <stdio.…...

编程日记 2025/8/25 8:13:47

如何根据设计稿进行移动端适配：全面详解

如何根据设计稿进行移动端适配&#xff1a;全面详解 文章目录 如何根据设计稿进行移动端适配&#xff1a;全面详解1. **理解设计稿**1.1 设计稿的尺寸1.2 设计稿的单位 2. **移动端适配的核心技术**2.1 使用 viewport 元标签2.1.1 代码示例2.1.2 参数说明 2.2 使用相对单位2.2.…...

编程日记 2026/1/26 10:56:40

【Kafka基础】Kafka 2.8以下版本的安装与配置指南：传统ZooKeeper依赖版详解

对于仍在使用Kafka 2.8之前版本的团队来说&#xff0c;需要特别注意其强依赖外部ZooKeeper的特性。本文将完整演示传统架构下的安装流程&#xff0c;并对比新旧版本差异。 1 版本特性差异说明 1.1 2.8 vs 2.8-核心区别 特性 2.8版本 2.8-版本 协调服务 可选内置KRaft模式 …...

编程日记 2026/1/28 13:20:46

Redis-x64-3.2.100.msi ： Windows 安装包（MSI 格式）安装步骤

Redis-x64-3.2.100.msi 是 Redis 的 Windows 安装包&#xff08;MSI 格式&#xff09;&#xff0c;适用于 64 位系统。 在由于一些环境需要低版本的Redis的安装包。 Redis-x64-3.2.100.msi 安装包下载&#xff1a;https://pan.quark.cn/s/cc4d38262a15 Redis 是一个开源的 内…...

编程日记 2026/1/27 9:29:56

ZoomCharts使用方法

本篇没有讲解&#xff0c;只是自己的小笔记&#xff0c;有看到的网友想明白具体用法的可以来私信我 <div class"zoomChartsComponent"><div id"zoomCharts-demo"></div></div> var ZoomChartsLicense ; var ZoomChartsLicenseKey…...

编程日记 2026/1/8 2:36:33

【云计算】打造高效容器云平台：规划、部署与架构设计

引言 随着移动互联网时代的大步跃进&#xff0c;互联网公司业务的爆炸式增长发展给传统行业带来了巨大的冲击和挑战&#xff0c;被迫考虑转型和调整。对于我们传统的航空行业来说&#xff0c;还存在传统的思维、落后的技术。一项新业务从提出需求到立项审批、公开招标、项目实…...

编程日记 2026/1/27 10:00:24

DeepSeek底层揭秘——《推理时Scaling方法》内容理解

4月初&#xff0c;DeepSeek 提交到 arXiv 上的最新论文正在 AI 社区逐渐升温。 论文核心内容理解 DeepSeek与清华大学联合发布的论文《奖励模型的推理时Scaling方法及其在大规模语言模型中的应用》&#xff0c;核心在于提出一种新的推理时Scaling方法&#xff0c;即通过动态调…...

编程日记 2026/1/27 8:25:44

JavaScript之Json数据格式

介绍 JavaScript Object Notation&#xff0c; js对象标注法&#xff0c;是轻量级的数据交换格式完全独立于编程语言文本字符集必须用UTF-8格式&#xff0c;必须用“”任何支持的数据类型都可以用JSON表示JS内内置JSON解析JSON本质就是字符串 Json对象和JS对象互相转化 前端…...

编程日记 2026/1/27 11:42:15