解决 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表单中添加一个隐藏字段来存储会话标识符。 这样，每次用户提交表单时，会话标识符将与请求一起发送到服务器，以便服务器可以跟踪用户的会话状态。 以下是一个隐藏表单字段的示例&#…...
线性代数相关笔记
线性基 导入 线性基，顾名思义，就是一个包含数字最少的集合，使得原集合中的任何数都能用线性基中的元素表示。 集合中的元素满足一些性质： 原集合中的任意元素都可以用线性基中的若干元素的异或和表示线性基中任意数异或和不为…...
】69 - Android 侧添加支持 busybox telnetd 服务)
【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文…...
JavaSec-RCE
简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性，…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令： return <value>;在收到客户端连接后，立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量（如 $time_iso8601、$remote_addr 等）&a…...
在rocky linux 9.5上在线安装 docker
前面是指南，后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...
C++ 基础特性深度解析
目录 引言 一、命名空间（namespace） C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用（reference） C 中的引用 与 C 语言的对比 四、inline（内联函数…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile，新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来，实在找不到，希望有大佬教一下我。 还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...