解决 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官方文档的说明
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/167405.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用screen实现服务器代码一直运行

1.安装screen sudo apt install screen 2.创建一个screen&#xff08;创建一个名为chatglm的新的链接&#xff0c;用来一直运行 screen -S chatglm 3.查看进程列表 screen -ls 创建之后&#xff0c;就可以在当前窗口利用cd命令进入要执行的项目中&#xff0c;开始执行&#xf…

pow函数

pow函数 pow的翻译是指数表达式 第一个参数为底数&#xff0c;第二个参数为指数 返回值为&#xff1a; 头文件为include <math.h> #include <stdio.h> #include <math.h>int main() {int ret (int)pow(10, 2);printf("%d\n", ret);return 0; }…

分享一下我家网络机柜,家庭网络设备推荐

家里网络机柜搞了几天终于搞好了&#xff0c;非专业的&#xff0c;走线有点乱&#xff0c;勿喷。 从上到下的设备分别是&#xff1a; 无线路由器&#xff08;当ap用&#xff09;:TL-XDR6088 插排&#xff1a;德木pdu机柜插排 硬盘录像机&#xff1a;TL-NVR6108-L8P 第二排左边…

云计算认证有哪些?认证考了有什么用?

云计算作为一项快速发展的技术&#xff0c;对人才的需求持续增长。无论是男生还是女生&#xff0c;只要具备相关的技能和知识&#xff0c;都可以在云计算领域找到就业机会。 目前入行云计算最好最便捷的方式就是考证&#xff0c;拿到一个云计算相关的证书&#xff0c;就能开启…

2023最新UI酒桌喝酒游戏小程序源码 娱乐小程序源码 带流量主

2023最新UI酒桌喝酒游戏小程序源码 娱乐小程序源码 带流量主 修改增加了广告位&#xff0c;根据文档直接替换&#xff0c;原版本没有广告位 直接上传源码到开发者端即可 通过后改广告代码&#xff0c;然后关闭广告展示提交&#xff0c;通过后打开即可 无广告引流 流量主版…

No171.精选前端面试题,享受每天的挑战和学习

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

SD NAND对比TF卡优势(以CSNP4GCR01-AMW为例)

最近做的一个项目&#xff0c; 需要加大容量存储&#xff0c;这让我想到之前在做ARM的开发板使用的TF卡方案&#xff0c;但是TF卡需要携带卡槽的&#xff0c;但是有限的PCB板布局已经放不下卡槽的位置。 这个时候就需要那种能够不用卡槽&#xff0c;直接贴在板子上面&#xff0…

1、VMware虚拟机及网络配置

一、VMware虚拟网络编辑器 1、选择NAT模式并配置子网 2、进入NAT设置&#xff0c;配置网关 3、宿主机网络适配器设置 二、创建虚拟机 在这里插入图片描述 三、开启虚拟机&#xff0c;安装操作系统 在该网段内配置静态ip&#xff0c;指定网关为前面NAT配置的网关地址…

DDD与微服务的千丝万缕

一、软件设计发展过程二、什么是DDD&#xff1f;2.1 战略设计2.2 战术设计2.3 名词扫盲1. 领域和子域2. 核心域、通用域和支撑域3. 通用语言4. 限界上下文5. 实体和值对象6. 聚合和聚合根 2.4 事件风暴2.5 领域事件 三、DDD与微服务3.1 DDD与微服务的关系3.2 基于DDD进行微服务…

《动手学深度学习 Pytorch版》 8.7 通过时间反向传播

8.7.1 循环神经网络的梯度分析 本节主要探讨梯度相关问题&#xff0c;因此对模型及其表达式进行了简化&#xff0c;进行如下表示&#xff1a; h t f ( x t , h t − 1 , w h ) o t g ( h t , w o ) \begin{align} h_t&f(x_t,h_{t-1},w_h)\\ o_t&g(h_t,w_o) \end{ali…

【马蹄集】—— 概率论专题:第二类斯特林数

概率论专题&#xff1a;第二类斯特林数 目录 MT2224 矩阵乘法MT2231 越狱MT2232 找朋友MT2233 盒子与球MT2234 点餐 MT2224 矩阵乘法 难度&#xff1a;黄金    时间限制&#xff1a;5秒    占用内存&#xff1a;128M 题目描述 输入两个矩阵&#xff0c;第一个矩阵尺寸为 l…

pytorch 入门 (三)案例一:mnist手写数字识别

本文为&#x1f517;小白入门Pytorch内部限免文章 &#x1f368; 本文为&#x1f517;小白入门Pytorch中的学习记录博客&#x1f366; 参考文章&#xff1a;【小白入门Pytorch】mnist手写数字识别&#x1f356; 原作者&#xff1a;K同学啊 目录 一、 前期准备1. 设置GPU2. 导入…

蓝桥每日一题(day 4: 蓝桥592.门牌制作)--模拟--easy

#include <iostream> using namespace std; int main() {int res 0;for(int i 1; i < 2021; i ){int b i;while(b){if (b % 10 2) res ;b / 10;}}cout << res; return 0; }

最强英文开源模型LLaMA架构探秘,从原理到源码

导读&#xff1a; LLaMA 65B是由Meta AI&#xff08;原Facebook AI&#xff09;发布并宣布开源的真正意义上的千亿级别大语言模型&#xff0c;发布之初&#xff08;2023年2月24日&#xff09;曾引起不小的轰动。LLaMA的横空出世&#xff0c;更像是模型大战中一个搅局者。虽然它…

doc与docx文档转html,格式样式不变(包含图片转换)

最近做一个富文本的需求&#xff0c;要求把文档内容转换到富文本内&#xff0c;文档中的格式也好&#xff0c;样式也好&#xff0c;图片啥的都要一致展示&#xff1b;踩了不少坑&#xff0c;据说word文档其实是一个压缩包&#xff0c;我不是特别清楚但是也能理解&#xff0c;自…

pymysql连接Mariadb/Mysql出现错误(配置正确情况下)解决办法

场景&#xff1a;在kali中使用python中pymysql对Mariadb进行连接&#xff0c;在整个过程中配置全部正确&#xff0c;但是就是无法进行连接&#xff0c;提示结果如下&#xff1a; Access denied for user rootlocalhost解决办法&#xff1a;进入数据库中&#xff0c;将默认密码…

自然语言处理---huggingface平台使用指南

1 huggingface介绍 Huggingface总部位于纽约&#xff0c;是一家专注于自然语言处理、人工智能和分布式系统的创业公司。他们所提供的聊天机器人技术一直颇受欢迎&#xff0c;但更出名的是他们在NLP开源社区上的贡献。Huggingface一直致力于自然语言处理NLP技术的平民化(democr…

C# 文件 校验:MD5、SHA1、SHA256、SHA384、SHA512、CRC32、CRC64

文件 校验 算法&#xff1a;MD5、SHA1、SHA256、SHA384、SHA512、CRC32、CRC64 (免费) 编程语言&#xff1a;C# 功能&#xff1a;文件 哈希 属性 校验算法&#xff1a;MD5、SHA1、SHA256、SHA384、SHA512、CRC32、CRC64。 下载&#xff08;免费&#xff09;&#xff1a;htt…

瑞萨e2studio(27)----使用EZ-CUBE3烧录

瑞萨e2studio.27--使用EZ-CUBE3烧录 概述视频教学样品申请引脚配置EZ-CUBE3 仿真器开关设置对RA族MCU进行Flash编程蓝色 LED 指示灯的状态信息 概述 EZ-CUBE3&#xff08;CYRCNEZCUBE03&#xff09;是具有Flash存储器编程功能的片上调试仿真器&#xff0c;可以用于调试MCU程序…