Vue + element中table来回切换页面显示差异问题

2023-11-08

这次做项目遇到多个table切换页面显示差异的问题,当我切换到上个页面的时候,表格有一列是下个页面的内容,切换到下个页面的时候那一列的内容消失了,就很奇葩。

这个问题也是我都一次遇到,问了Baidu阿姨,上面的解决办法好像都不行,这个时候感觉这个bug好像解决不了,但是不解决也不行,先出去点根烟冷静一下~~~~~~~~

抽到一半的时候想起来element的table有template,用一下slot-scope="scope"把scope换成不一样的试一试,感觉这个办法也不错,不管对不对先尝试一下。

吸到最后一口的时候突然想起来,我当时用了v-if来切换的,换成v-show感觉会更好点。

我解释一下v-if和v-show的区别:

实现本质方法区别:
v-show本质就是标签display设置为none,控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素

编译的区别:
v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件

编译的条件:
v-show都会编译,初始值为false,只是将display设为none,但它也编译了
v-if初始值为false,就不会编译了

性能:
v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点

话不多说上代码:

<div class="my-office"
	style="height: 653px;width: 1135px;margin-left: 20px;box-shadow: 3px 3px 10px #4472a2;padding: 20px;border-radius: 10px;"
				v-show="displayBlock == '6'">
		<el-table-column align="center" prop="createDate" label="登记日期">
		</el-table-column>
	</el-table>
</div>
//原本是使用v-if的后来改变成v-show
<div class="my-office"
	style="height: 653px;width: 1135px;margin-left: 20px;box-shadow: 3px 3px 10px #4472a2;padding: 20px;border-radius: 10px;"
				v-show="displayBlock == '7'">
		<el-table-column align="center" prop="createDate" label="登记日期">
		</el-table-column>
	</el-table>
</div>

slot-scope="scope"方法也是可以的

<!-- 原本的方式 -->
<el-table-column prop="createDate" label="登记日期"></el-table-column>
 
<!-- 更改之后 -->
<el-table-column prop="createDatet" label="登记日期">
	<template slot-scope="scope">
		<span>{{scope.row.createDate}}</span>
	</template>
</el-table-column>

这里看你项目的需求在去考虑用什么方式(我是用v-show的)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue + element中table来回切换页面显示差异问题 的相关文章

随机推荐

  • 虚拟机隔离

    虚拟机隔离 虚拟机隔离 需求分析 隔离内容 隔离措施 需求分析 背景 多实例的虚拟化环境 目标 通过隔离机制 具有利益关系的用户的虚拟机之间独立运行 互不干扰 风险 如果隔离不有效 当一个虚拟机方式错误时 会影响其他虚拟机 甚至整个系统 当
  • 网络安全-防守-护网

    护网背景 一 什么是护网 网络安全的态势之严峻 迫切需要我们在网络安全领域具备能打硬仗的能力 护网行动 应运而生 护网目标 通过防守工作与技术方案 做好 护网 前期准备 安全自查整改 攻防演练和演练总结等各阶段相关工作 保证护网期间 与相关
  • shell中算术运算、相加减

    前言 在shell脚本中 所有的变量默认都是字符串存储 操作也是按照字符串进行处理的 但我们不可避免的需要对各中数值进行算术运算 如算术的相加减 那么这时怎么处理呢 在shell脚本中 我们要实现对数值的算术运行 就要用到一下三种命令方式
  • payload模块怎Linux,kali linux之Msf-exploit模块,生成payload

    Exploit模块 Active exploit 主动地向目标机器发送payload并执行 使目标交出shell 反连等 msf5 gt use exploit windows smb psexec msf5 exploit windows
  • C语言图形库EasyX安装及基本使用

    本文章介绍C 用EasyX进行C 基础图形编程介绍 EasyX安装 1 点击上方超链接 进入官网 点击右侧下载EasyX 2 点击下载后的可执行文件 3 EasyX安装非常简单 进入可执行文件 直接next 然后会自动检测你的开发工具 针对
  • imx6ull_kernel_移植

    1 文件目录结构 2 顶层Makefile理解 3 kernel启动流程 4 kernel移植 心得 跟着左神一步一步操作 目前没有太多的理解 硬件适配中网络驱动和emmc 8线适配讲解的最多 文件移植部分基本就是拷贝和粘贴 Q 1 如果要
  • [837]如何统计OSS上整个Bucket和每个目录大小和文件数

    如题 这个功能相当实用 通过本文讲解的方法 可以方便的看到整个Bucket所占用的空间大小 以及每个目录下所含目录和文件所占用的空间大小 一目了然 1 一般情况下 我们打开OSS文件管理器 可以看到目录和文件 可以看到每个文件的大小 但是无
  • FISCO BCOS网络端口讲解

    本期文章讲的就是网络端口互通这点事 作者从FISCO BCOS的网络端口 FISCO BCOS 2 0的典型网络配置 设计网络安全组的一些策略等角度进行了解析 Part 1 FISCO BCOS 2 0网络的三类端口 FISCO BCOS
  • 第五届阿里天池中间件比赛经历分享-决赛

    消息持久化存储引擎 题目 实现一个进程内消息持久化存储引擎 要求包含以下功能 发送消息功能 根据一定的条件做查询或聚合计算 包括 A 查询一定时间窗口内的消息 B 对一定时间窗口内的消息属性某个字段求平均 以及求和 例子 t表示时间 时间窗
  • 采用信号量机制实现消费者与生产者的线程同步_经典生产者-消费者问题解析...

    1 生产者 消费者问题 生产者和消费者问题在现实系统中是很普遍的 例如在一个多媒体系统中 生产者编码视频帧 而消费者消费 解码 视频帧 缓冲区的目的就是减少视频流的抖动 又如在图形用户接口设计中 生产者检测到鼠标和键盘事件 并将其插入到缓冲
  • 10.MATLAB方差分析

    更多MATLAB数据分析视频请点击 或者在网易云课堂上搜索 MATLAB数据分析与统计 http study 163 com course courseMain htm courseId 1003615016 方差分析是英国统计学家R A
  • 推荐模块丨前端uniapp微信小程序项目

    小兔鲜儿 推荐模块 主要实现 Tabs 交互 多 Tabs 列表分页加载数据 动态获取数据 参考效果 推荐模块的布局结构是相同的 因此我们可以复用相同的页面及交互 只是所展示的数据不同 外链图片转存失败 源站可能有防盗链机制 建议将图片保存
  • 2021.11.01 c++下 opencv部署yolov5-6.0版本 (四)

    0 写在最前 2022 10 10 更新yolov5 seg实例分割模型 2022 09 29更新 c 下面使用opencv部署yolov5和yolov7实例分割模型 六 爱晚乏客游的博客 CSDN博客 2022 07 25 更新了下yol
  • [JAVAee]IP数据包的组包与分包

    目录 数据包是什么 数据包的结构 数据包 分组与分组交换 分包是什么 为什么需要分包呢 组包是什么 分包组包过程中和哪些 IP 报头字段有关联 本篇文章主要围绕三个问题来展开 为什么要分包 分包组包过程中和哪些 IP 报头字段有关联 组包时
  • matlab怎么显示当前文件夹和工作区

    参考 matlab怎么显示当前文件夹和工作区 云 社区 腾讯云 1 第一步在我们的电脑上打开matlab 可以看到界面上目前没有显示当前文件夹和工作区 如下图所示 2 第二步我们点击主页右侧的布局 可以看到显示下的当前文件夹和工作区没有勾选
  • 遗传算法入门到掌握(一)

    遗传算法入门到掌握 一 心得 把解决方案做染色体 遗传算法的有趣应用很多 诸如寻路问题 8数码问题 囚犯困境 动作控制 找圆心问题 这是一个国外网友的建议 在一个不规则的多边形 中 寻找一个包含在该多边形内的最大圆圈的圆心 TSP问题 在以
  • node.js HTTP模块 URL模块 supervisor工具

    在vscode 上安装一个插件 Node Snippets 创建一个js文件 直接输入node 就能创建一个服务器 node http server var http require http 表示引入一个HTTP模块 request 表示
  • Texture Format全解析

    Texture Format全解析 Texture Format全解析 What internal representation is used for the texture This is a tradeoff between size
  • sqlmap的安装及使用教程

    1 sqlmap简介 sqlmap 是一个开源渗透测试工具 可自动检测和利用 SQL 注入缺陷并接管数据库服务器 支持多种数据库和多种注入技术 2 sqlmap安装 sqlmap是基于python环境的 因此安装前需要安装python环境
  • Vue + element中table来回切换页面显示差异问题

    这次做项目遇到多个table切换页面显示差异的问题 当我切换到上个页面的时候 表格有一列是下个页面的内容 切换到下个页面的时候那一列的内容消失了 就很奇葩 这个问题也是我都一次遇到 问了Baidu阿姨 上面的解决办法好像都不行 这个时候感觉