用ElementPlus开发el-tab结合router-view调用组件时需要注意多次渲染的问题

最近在用vue3+elementPlus开发后台界面,用到右侧el-tab这个组件结合router-view实现调用,刚在逛csdn的时候发现一个大佬说如果把router-view放在el-tab-pane下会导致多次渲染,我想还有这事?赶紧测试一下。。。果然,大佬还是大佬。

原代码及渲染次数

<el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab"><el-tab-pane v-for="tab in tabs" :key="tab._id" :label="tab.title" :name="tab._id"><router-view></router-view></el-tab-pane>
</el-tabs>

点击三个菜单

在这里插入图片描述

注意一下左侧的次数,出乎意料啊。

在这里插入图片描述

修改代码及渲染次数

router-view扔出去

<el-tabs v-model="activeTab" type="card" closable @tab-remove="removeTab"><el-tab-pane v-for="tab in tabs" :key="tab._id" :label="tab.title" :name="tab._id"></el-tab-pane>
</el-tabs>
<router-view></router-view>

在这里插入图片描述
果然干净了!

同时还解决了我另一个问题:
之前默认打开页面时要显示首页,代码写好了却一直没实现,我想是个小问题就没去管,结果刚才把router-view拿出el-tab-pane后就好了~~看来就是他自说自话把我要显示的给覆盖渲染掉了。

【vue】elementUi 里面的tabs标签页使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/57908.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python数字图像处理——基于SIFT特征提取的图像拼接算法(暴力匹配、knn匹配和hist匹配)

&#xff08;1&#xff09;项目概述 本文通过Python实现基于SIFT特征提取的图像拼接算法&#xff0c;包括三种匹配策略&#xff1a;暴力匹配、KNN&#xff08;k近邻&#xff09;匹配和hist直方图的特征匹配。SIFT算法是一种在尺度和旋转上不变的特征提取算法。它能够在图像中找…

Python浪漫之画星星

效果图&#xff08;动态的哦&#xff01;&#xff09;&#xff1a; 完整代码&#xff08;上教程&#xff09;&#xff1a; import turtle import random import time # 导入time模块# 创建一个画布 screen turtle.Screen() screen.bgcolor("red")# 创建一个海龟&a…

程序员修仙传

凡人修仙 前文修仙愿望练气期筑基期结丹期元婴期化神期大乘期成神 前文 工作好几年了&#xff0c;前前后后经历很多。一年一度的程序员日&#xff0c;回首总是惆怅&#xff0c;但时间永远向前&#xff0c;以前车之鉴未雨绸缪。工作如修仙&#xff0c;以修仙角度解读心得感想。…

PostgreSQL(十三)pgcrypto 扩展实现 AES、PGP 加密,并自定义存储过程

目录 一、pgcrypto 简介1.1 安装 pgcrypto 扩展1.2 pgcrypto 包含的函数 二、用法①&#xff1a;对称加密&#xff08;使用 AES、Blowfish 算法&#xff09;2.1 密钥2.2 密钥偏移量 三、用法②&#xff1a;PGP加解密3.1 什么是PGP算法&#xff1f;3.2 使用 GPG 生成密钥对3.3 列…

TypeScript基础简介

TypeScript是Javascript的一个超集。 TypeScript在原有的基础之上又添加了编译器类型检查的功能&#xff0c;意味着如果使用ts进行开发&#xff0c;会对变量的类型进行较为严格的验证&#xff0c;防止程序员写出可能出错的代码&#xff0c;规范变成习惯&#xff0c;适合大项目开…

关于我的数据库——MySQL——第四篇

&#xff08;叠甲&#xff1a;如有侵权请联系&#xff0c;内容都是自己学习的总结&#xff0c;一定不全面&#xff0c;仅当互相交流&#xff08;轻点骂&#xff09;我也只是站在巨人肩膀上的一个小卡拉米&#xff0c;已老实&#xff0c;求放过&#xff09;。 函数 函数名称描…

SwitchHosts快速修改host文件

中文说明 https://github.com/oldj/SwitchHosts/blob/master/README.zh_hans.md 下载地址 https://github.com/oldj/SwitchHosts/releases 搭配域名对应的ip地址查询工具DNS Checker - DNS Check Propagation Tool

网络搜索引擎Shodan(2)

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 声明&#xff1a;本文主要用作技术分享&#xff0c;所有内容仅供参考。任何使用或依赖于本文信息所造成的法律后果均与本人无关。请读者自行判断风险&#xff0c;并遵循相关法律法规。 感谢泷…

Windows 和 Linux 下常用命令(待更新)

Windows PowerShell 命令 1. 获取命令帮助信息 Get-Help [命令]2. 解决 Windows 平台下由于 “你需要权限才能执行此操作” 导致的文件夹删除失败 rm [需要删除的文件或文件夹] -Recurse -ForceLinux 命令 1. grep 使用正则表达式匹配字符串 grep -o -P [PATTERNS] [FILES…

Vue 项目中 Webpack 常见问题详解

前言 在Vue.js项目中&#xff0c;Webpack 作为打包工具&#xff0c;处理各种静态资源和模块化的代码打包需求。尽管 Webpack 在 Vue CLI 项目中已经配置好了一些默认行为&#xff0c;但开发者在实际项目中仍然会遇到许多与资源管理、public 和 assets 目录、require 语法等相关…

【力扣 | SQL题 | 每日4题】力扣2004, 1454,1613,1709

1. 力扣2004&#xff1a;职员招聘人数 1.1 题目&#xff1a; 表: Candidates ------------------- | Column Name | Type | ------------------- | employee_id | int | | experience | enum | | salary | int | ------------------- employee_id是此表的主键列。 经…

dfs复习(一)

题目在蓝桥云课上&#xff1a; 1.四位密码锁 四层&#xff0c;每层遍历所有可能的数字。 #include <bits/stdc.h> using namespace std; typedef long long ll; int sum0; void dfs(int depth,int ans) {if(depth4) //不再递归 {if(ans384) {sum;}return;}for(int i…

Python 从入门到实战40(数据分析概述)

我们的目标是&#xff1a;通过这一套资料学习下来&#xff0c;可以熟练掌握python基础&#xff0c;然后结合经典实例、实践相结合&#xff0c;使我们完全掌握python&#xff0c;并做到独立完成项目开发的能力。 上篇文章我们讨论了通过线程的相关知识。今天学习一下数据分析相…

#网络安全#渗透测试# 渗透测试应用

网络安全渗透测试是一种重要的安全评估方法&#xff0c;用于发现和评估网络系统中的安全漏洞。在进行渗透测试时&#xff0c;需要注意以下几个关键点&#xff1a; 法律和道德考量 获得授权&#xff1a;在进行渗透测试之前&#xff0c;必须获得目标系统的正式授权。未经授权的测…

python实现数据库的增删改查功能,图形化版本

import tkinter from tkinter import * import psycopg2 from tkinter import messagebox#连接信息 t_conn{"dbname": "d1","user": "u1","password": "123qqq...A","port": "15400","h…

vue+spreadjs开发

创建vue3项目 pnpm create vite --registryhttp://registry.npm.taobao.org安装spreadjs包 pnpm install "grapecity-software/spread-sheets17.1.7" "grapecity-software/spread-sheets-resources-zh17.1.7" "grapecity-software/spread-sheets-vu…

基于DDPG算法的股票量化交易

项目源码获取方式见文章末尾&#xff01; 回复暗号&#xff1a;13&#xff0c;免费获取600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 **《------往期经典推荐------》**项目名称 1.【基于PyQTFaceNet卷积神经网络实现的学生人脸识别考勤系统】 2.【卫星图像道…

计算机强校99+分《数据库》课设

高校成绩数据库系统设计与实现 1、需求分析 1.1 数据需求描述 1.2 系统功能需求 1.3 其他性能需求 2、概念结构设计 2.1 局部E-R图 2.2 全局E-R图 2.3 优化E-R图 3、逻辑结构设计 3.1 关系模式设计 3.2 数据类型定义 3.3 关系模式的优化 4、物理结构…

川渝地区软件工程考研择校分析

C哥专业提供——计软考研院校选择分析专业课备考指南规划 通过最新数据分析,5所高校软件工程专业2025年考研难度从高到低预计为: 电子科技大学 >> 四川大学 > 重庆大学 ≈ 西南交通大学 > 西南大学 对于想考川渝地区985但核心目标为优先上岸的考生,建议重点考虑西…

gin入门教程(9):路由分组与路由版本控制

在使用 Gin 框架构建 RESTful API 时&#xff0c;路由分组与版本控制是一种常见的实践&#xff0c;可以帮助你更好地管理不同版本的 API。下面是如何在 Gin 中实现路由分组和版本控制的示例。 目录结构 /hello-gin │ ├── cmd/ │ └── main.go ├── api/ │ ├─…