vue + element ui中tabs页面组件切换数据更新_elementui切换tab标签数据会清空-程序员宅基地
vue + element ui中tabs页面组件切换数据更新
开发中遇到了一个问题就是我使用element ui中的tabs组件时候，每一个tab内嵌套了一个组件页面，但是我发现当切换之后，生命周期都没有走，页面的方法也没有触发
5个tabs 中放了5个页面组件，第一次进来后，5个组件内的接口都全部请求了，点击切换tab将不再触发接口
解决方法就是
可以采用 tabs的name和每一个组件的隐藏状态同名，并且每一个组件的隐藏状态值都是tabsArr里面的值,并且放在tabsArr里面
当切换之后 对应handleClick方法会判断当前点击的页面name和tabsArr对象里面哪一个属性名相同，如果相同就改为true，反之其他的隐藏状态改为false
<template>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="1" name="first">
<Legalpay
caption="充币数据管理"
v-if="tabsArr.first"
/>
</el-tab-pane>
<el-tab-pane label="2" name="second">
<Legalpay
caption="提币数据管理"
v-if="tabsArr.second"
/>
</el-tab-pane>
<el-tab-pane label="3" name="third">
<Legalpay
caption="法币充值数据管理"
v-if="tabsArr.third"
/>
</el-tab-pane>
<el-tab-pane label="4" name="fourth">
<Legalpay
caption="法币提现数据管理"
v-if="tabsArr.fourth"
/>
</el-tab-pane>
<el-tab-pane label="5" name="fifth">
<Legalpay
caption="国际电汇数据管理"
v-if="tabsArr.fifth"
/>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import Legalpay from './Statisticspage'
export default {
components: {
Legalpay },
data() {
return {
activeName: "first",
tabsArr: {
first: true,
second: false,
third: false,
fourth: false,
fifth: false
},
};
},
methods: {
tabs的切换点击方法 tab中的name是当前点击选中的那一项的name的值
handleClick(tab) {
for (var key in this.tabsArr) {
if (tab.name != key) {
this.tabsArr[key] = false;
} else {
this.tabsArr[key] = true;
}
}
},
},
created() {
},
};
</script>
按照原文链接方法改的，可行。
原文链接：https://blog.csdn.net/qq_42628504/article/details/121324815
智能推荐
Linux系统基础命令与帮助使用_linux的长用命令是直接与机架cpu-程序员宅基地
文章浏览阅读79次。2019年1月2-6号 对应章节老王亲讲：1、马哥教育教学总监-老王亲讲Linux基础入门2、教学总监老王亲讲-Linux基础命令与Linux帮助使用服务器类型：刀片、塔式、机架式常见服务器CPU:xeon 至强机柜1u=44.45mm存储网络类型：DAS直接连接存储、NAS网络连接存储、SAN存储区域网络ABI:与OS之间的接口 API：与库之间的接口Linux版本：deb..._linux的长用命令是直接与机架cpu
从原理到实践：音视频编码与解码技术解析_音视频编解码-程序员宅基地
文章浏览阅读1.7k次，点赞2次，收藏9次。本项目的目标是深入探索音视频编码与解码技术的原理与实践，通过实现一个音视频编码与解码系统，加深对该领域的理解，并掌握相关的软件开发和硬件设计技术。可以使用适当的视频输入设备进行视频数据的采集，并对采集到的视频数据进行预处理，例如图像增强、分辨率调整等。硬件平台的选择将直接影响系统的性能和资源消耗。在实验3中，我们使用了不同的视频编码算法对采集到的视频数据进行编码，并计算了编码后的码流大小和图像质量指标。在实验1中，我们使用了不同的音频编码算法对采集到的音频数据进行编码，并计算了编码后的码流大小和音质指标。_音视频编解码
orcle plsql 列类型 BLOB与CLOB的互转，RAW_blob转clob-程序员宅基地
文章浏览阅读3.5k次。2011年记 目的：遇到这种情况，mysql to oracle时 text类型转到oracle自动变为BLOB,但这些字段只需要CLOB.所以打算把BLOB转为CLOB。（在sqlplu或plsql中完成） 解决办法例：表gw_gift 字段description BLOB1、增加字段description1 CLOB2、把BLOB列数据写入CLOBupdate gw_gift p set p...._blob转clob
windows下新版QGC地面站环境搭建全面攻略（v4.1.x QGroundControl地面站搭建，附源码百度网盘）-程序员宅基地
文章浏览阅读1.9w次，点赞81次，收藏149次。win10下新版本QGC地面站环境搭建1. VS2017编译环境搭建2. QT环境搭建3. 源码下载4. QT Creator工程配置1. VS2017编译环境搭建win10上是使用VS来编译和链接的：VS2017进入链接接下来，选择2017社区版：下载后安装，右边为默认的安装，这个要装蛮久，这时候可以弄QT了2. QT环境搭建● 下载：官网指定的版本，其他我也没试过， QT 5.12.6(点击这里)下载慢的话，可以复制下载链接到迅雷，速度杠杠的！● 安装：记得都是64的安装_qgc地面站
探秘高效Linux C/C++项目架构：让进程、线程和通信方式助力你的代码飞跃_linux c++线程间通信-程序员宅基地
文章浏览阅读1.5k次。探秘高效项目架构：让进程、线程和通信方式助力你的代码飞跃_linux c++线程间通信
PROFINET主站转MODBUS-TCP协议网关_profinet转modbus-程序员宅基地
文章浏览阅读106次。本产品是 ModbusTCP 和 Profinet(M)网关 (以下简称网关) ，使用数据映射 方式工作。本产品在 ModbusTCP 侧作为 ModbusTCP 从站，接 PLC 、上位机、wincc 屏等；在 Profinet 侧做为 Profinet 主站控制器，接 Profinet 设备，如伺服驱动器。_profinet转modbus
随便推点
电源模块自动测试系统| 电源冷热冲击测试方法是什么？-程序员宅基地
文章浏览阅读139次。电源冷热冲击测试是指将被测品在极端热、冷环境间反复转移，模拟被测品在剧烈环境变化下的变化情况，用来评估电源的耐热性和耐寒性，进而评估电气设备的性能和稳定性。
web页面调用海康摄像头_js调用海康摄像头视频-程序员宅基地
文章浏览阅读4.5k次，点赞2次，收藏4次。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./jquery-1.12.4.min.js._js调用海康摄像头视频
深圳大学本科毕业论文答辩PPT模板_深圳大学答辩ppt模板-程序员宅基地
文章浏览阅读701次。模板介绍精美PPT模板设计，深圳大学本科毕业论文答辩PPT模板。一套高校PPT幻灯片模板，内含灰色,红色多种配色，精美风格设计，动态播放效果，精美实用。一份设计精美的PPT模板，可以让你在汇报演讲时脱颖而出。希望下面这份精美的PPT模板能给你带来帮助，温馨提示：本资源使用PPT或PPTX等格式，请安装并使用Office或WPS软件打开。模板信息模板编号：P95164用途：高校PPT。模板格式：pptx格式（可随意下载编辑）页数：27页大小：10MB比例：16:9编辑软件：wp_深圳大学答辩ppt模板
为类创建自定义调试信息,让你的调试更加方便快捷-程序员宅基地
文章浏览阅读206次。我们在应用程序中使用类一组类，你想在调试器中快速查看类中的值。默认情况下调试器不会展示自定义类的信息。此时我们可以向类添加一个DebuggerDisplay的特性。此时调试器就会你想要显示的信息。如下 [DebuggerDisplay("User Full Name={Id} {Name} {Age}")] public class User {..._怎么在sys的class目录生成调试信息
小米路由器r3gv2/r4a Lean的OpenWrt固件_openwrt-ramips-mt7621-xiaomi_r4a-squashfs-sysupgra-程序员宅基地
文章浏览阅读2.3w次，点赞4次，收藏16次。小米路由器r3gv2这是一款运营商定制的小米千兆路由器，是r3g（128M+256M+USB）的阉割版，闪存16M，内存128M，处理器是MediaTek MT7621，这个配置勉强可以玩一玩，闲鱼上也有很多，性价比比较高。进入路由器终端自己刷固件的话，首先就是要打开路由器的ssh或者telnet，小米早年的路由器官方都有开启ssh的教程，而这款就需要自己想办法了。Root shell exploit for several Xiaomi routers: 4A Gigabit, 4A 100M,_openwrt-ramips-mt7621-xiaomi_r4a-squashfs-sysupgrade
文本和二进制文件-程序员宅基地
文章浏览阅读290次，点赞5次，收藏7次。*根据数据的组织形式，数据文件被称为文本文件或者二进制文件。数据在内存中以二进制的形式存储，如果不加转换的输出到外存，就是二进制文件。如果要求在外存上以ASCII码的形式存储，则需要在存储前转换。以ASCII字符的形式存储的文件就是文本文件。字符一律以ASCII形式存储，数值型数据既可以用ASCII形式存储，也可以使用二进制形式存储。如有整数10000，如果以ASCII码的形式输出到磁盘，则磁盘中占用5个字节（每个字符一个字节），而。