解决 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文…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态 常用选项： n 拒绝显示别名&#…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU：如何让RNN变得更聪明？ 在深度学习的世界里，循环神经网络（RNN）以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而，传统RNN存在的一个严重问题——梯度消失&#…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
如何在网页里填写 PDF 表格？
有时候，你可能希望用户能在你的网站上填写 PDF 表单。然而，这件事并不简单，因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件，但原生并不支持编辑或填写它们。更糟的是，如果你想收集表单数据ÿ…...
基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用，结合SQLite数据库实现联系人管理功能，并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能，同时可以最小化到系统…...
VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式，然后找到相应的网卡（可以查看自己本机的网络连接） windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置，选择刚才配置的桥接模式 静态ip设置： 我用的ubuntu24桌…...