解决 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文…...
＜6＞-MySQL表的增删查改
目录 一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件 三，update（更新表） 四，delete（删除表…...
rknn优化教程（二）
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数 这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码，写上注释 当然可以！这段代码是 Qt …...
【机器视觉】单目测距——运动结构恢复
ps：图是随便找的，为了凑个封面 前言 在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
工程地质软件市场：发展现状、趋势与策略建议
一、引言 在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析：跨文件编程的终极指南 📅 更新时间：2025年6月5日 🏷️ 标签：C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么？&…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...