解决 Element-ui中 表格(Table)使用 v-if 条件控制列显隐时数据展示错乱的问题
本文 Element-ui 版本 2.x
问题
在 el-table-column 上需根据不同 v-if 条件来控制列显隐时,就会出现列数据展示错乱的情况(要么 A 列的数据显示在 B 列上,或者后端返回有数据的但是显示的为空),如下所示。
<template><div><el-table:data="tableData"bordersize="mini"style="width: 100%"><el-table-column prop="date" label="登记日期" align="center" ></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="age" label="年龄" align="center"></el-table-column><el-table-column prop="sex" label="性别" align="center" v-if="flag1"></el-table-column><el-table-column prop="height" label="身高" align="center" v-if="flag2"></el-table-column><el-table-column prop="address" label="城市" align="center"></el-table-column> </el-table></div>
</template>

解决方法
在每个需要使用 v-if 或 v-else 的 el-table-column 上增加 key 作为唯一标识,这样渲染的时候就不会因为复用原则导致列数据混乱了。关于key值,一般习惯使用字段名,也可随机生成一个值,只要具有唯一性就可以。
<template><div class="home"><el-table:data="tableData"bordersize="mini"style="width: 100%"><el-table-column prop="date" label="登记日期" align="center" ></el-table-column><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="age" label="年龄" align="center"></el-table-column><el-table-column prop="sex" label="性别" align="center" key="sex" v-if="flag1"></el-table-column><el-table-column prop="height" label="身高" align="center" key="height" v-if="flag2"></el-table-column><el-table-column prop="address" label="城市" align="center"></el-table-column> </el-table></div>
</template>
拓展:关于 key Vue官方文档的说明

相关文章:
解决 Element-ui中 表格(Table)使用 v-if 条件控制列显隐时数据展示错乱的问题
本文 Element-ui 版本 2.x 问题 在 el-table-column 上需根据不同 v-if 条件来控制列显隐时,就会出现列数据展示错乱的情况(要么 A 列的数据显示在 B 列上,或者后端返回有数据的但是显示的为空),如下所示。 <tem…...
Android JNI笔记
JNI、java native interface 。可以实现Java和C、C之间的调用。 在Android开发中是必须要掌握的内容。 在应用开发中,编写JNI代码的注册可分为动态注册和静态注册 动态注册: 声明好方法、注意这些签名 在JNI_OnLoad中进行注册。 static const JNINativ…...
Web开发中会话跟踪的隐藏表单字段(隐藏input)方法
隐藏表单字段是一种会话跟踪方法,通过在HTML表单中添加一个隐藏字段来存储会话标识符。 这样,每次用户提交表单时,会话标识符将与请求一起发送到服务器,以便服务器可以跟踪用户的会话状态。 以下是一个隐藏表单字段的示例&#…...
线性代数相关笔记
线性基 导入 线性基,顾名思义,就是一个包含数字最少的集合,使得原集合中的任何数都能用线性基中的元素表示。 集合中的元素满足一些性质: 原集合中的任意元素都可以用线性基中的若干元素的异或和表示线性基中任意数异或和不为…...
【SA8295P 源码分析 (四)】69 - Android 侧添加支持 busybox telnetd 服务
【SA8295P 源码分析】69 - Android 侧添加支持 busybox telnetd 服务 一、下载 busybox-1.36.1.tar.bz2 源码包二、编译 busybox 源码三、将编译后的 busybox 打包编入Android 镜像中系列文章汇总见:《【SA8295P 源码分析 (四)】网络模块 文章链接汇总 - 持续更新中》 本文链接…...
如何开发一个 Safari 插件
本文字数:2493字 预计阅读时间:15分钟 由于常用浏览器是Safari,而Safari浏览器的插件比不上Chrome,所以就有了自己开发常用的Safari插件的想法。 打算开发当前页面生成二维码的Extension,因为网络原因,AirD…...
n皇后问题,不用递归
注释如下: class Solution:def totalNQueens(self, n: int) -> int:if n < 1: # 如果 n 小于 1,直接返回 0return 0count 0 # 初始化解的个数为 0stack [(0, set(), set(), set())] # 初始化一个栈,元素为当前处理的行数、已经放…...
Verilog基础:$fopen和$fclose系统函数、任务的使用
相关阅读 Verilog基础https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 $fopen和$fclose是两个用于打开和关闭文件的系统函数、任务。最初,在Verilog-1995标准中,最多只能同时打开32个文件,其所使用的…...
python之字典的用法
python之字典的用法 Python中的字典是一种无序、可变、可迭代的数据类型,它由键值对组成,每个键都映射到一个值。字典在Python中被视为可变对象,这意味着我们可以随时更新、添加或删除字典中的键值对。 以下是一些关于Python字典的基本用法&a…...
Leetcode1971. 寻找图中是否存在路径
Every day a Leetcode 题目来源:1971. 寻找图中是否存在路径 解法1:并查集 并查集介绍:并查集详解 代码: /** lc appleetcode.cn id1971 langcpp** [1971] 寻找图中是否存在路径*/// lc codestart class UnionFind {vector&…...
程序可以创建多少个用户界面对象?
有人提到这样一个问题:”一个程序最多可以注册多少个窗口类?” 问题的答案不是一个具体的数字。因为大多数用户界面对象都来自一个共享的内存池,我们称之为”桌面堆内存”。尽管我们可以计算一个最大的理论值,但是在实际的场景中࿰…...
业绩不俗,毛利率下滑,股价接连下跌,片仔癀将向何处去?
撰稿|行星 来源|贝多财经 10月16日,中药龙头企业漳州片仔癀药业股份有限公司(600436.SH,下称“片仔癀”)发布截至9月30日的2023年前三季度业绩报告。发布财报后,片仔癀的股价多日下跌。 10月17日、18日、19日和20日…...
云安全—docker容器镜像检测
0x00 前言 docker镜像是属于整个云原生的重要基石之一,如果从镜像开始就没有安全性的话,那么整个云原生也就没有任何的安全性可言。所以镜像检测技术就成为了一个比较重要的点,本篇将通过研究docker镜像工具来整体分析风险以及应对方案。 市…...
JDBC相关记录
JDBC:Java DadaBase Connectivity 即Java语言连接数据库。 本质:JDBC是SUN公司制定的一套接口(interface)。 作用:不同的数据库有自己独特设计原理,JDBC的可以让Java程序员关注业务本身,而不需要…...
Nginx的基本介绍 安装 配置文件 日志
一、Nginx介绍二、nginx的优点三、多路复用1、I/O multiplexing 多并发 四、nginx内部技术架构五、安装NginxNginx部署-yum安装获取Nginx的yum源yum安装Nginx浏览器访问 编译安装Nginx安装编译环境安装依赖环境创建nginx用户安装nginx启动nginx实现nginx开机自启(脚…...
docker部署nginx并设置挂载
前言: 最近在学习docker和nginx,因为容器在运行过程中,相关的配置文件及日志都会存在容器内。对容器以来较高,当容器不存在的时候。所有的文件也就都没有了。并且当需要查看日志,修改配置文件的时候必须进入到容器内部…...
MAC如何在根目录创建文件
在这之前先明确一下啥是根目录。 打开终端,输入cd /,然后输入 ls 查看根目录下有哪些文件 可以看到 usr、etc、opt 这些文件的地方才叫根目录,而不是以用户命名,可以看到音乐、应用程序、影片、桌面的地方哈 介绍一种叫做软连接…...
某全球领先的芯片供应商:优化数据跨网交换流程,提高安全管控能力
1、客户介绍 某全球领先的芯片供应商,成立于2005年,总部设于北京,在国内上海、深圳、合肥等地及国外多个国家和地区均设有分支机构和办事处,致力于为客户提供更优质、便捷的服务。 2、建设背景 该公司基于网络安全管理的需求&am…...
自然语言处理---文本预处理概述
自然语言处理(Natural Language Processing,简称NLP)是计算机科学与语言学中关注于计算机与人类语言间转换的领域。其主要应用于:语音助手、机器翻译、搜索引擎、智能问答等。 文本预处理概述 文本语料在输送给模型前一般需要一…...
GCC编译器 什么是宏? 标识符和关键字
一.GCC是什么? GCC是用于编译C语言和其它语言的开源软件。 全称是 GNU Compiler Collection,意思是GNU编译器集和。 支持多种操作系统和硬件平台。二.GCC的作用 GCC的作用是将源码转换为可执行的文件,使之可以在计算机上运行。三.GCC编译c文…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上,开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识,在 vs 2017 平台上,进行 ASP.NET 应用程序和简易网站的开发;初步熟悉开发一…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统:Ubuntu 24.04 LTS (WSL2)架构:x86_64 (GNU/Linux)Rust 版本:rustc 1.87.0 (2025-05-09)Cargo 版本:cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机,因为在使用过程中发现 Airsim 对外部监控相机的描述模糊,而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置,最后在源码示例中找到了,所以感…...
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下,推客小程序系统凭借其裂变传播、精准营销等特性,成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径,助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
规则与人性的天平——由高考迟到事件引发的思考
当那位身着校服的考生在考场关闭1分钟后狂奔而至,他涨红的脸上写满绝望。铁门内秒针划过的弧度,成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定",构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...
