elementui的table组件,大量使用v-if导致列表渲染错乱,有的列渲染的值不对,有的列渲染出来的空值解决办法

news2025/1/24 2:25:33

记录一下:

这是同事碰上的,感觉挺奇怪的就研究了研究。

先说一下,之所以是同事那边碰到的而我这边碰不到这个问题,是因为我这边做 el-table-column 的时候,是先定义的 tableHeader: [...] 然后通过 v-for 遍历出来的,vue 开发的都知道,v-for 的时候都会绑定 :key="" ,他这里是平铺出来的

举例代码(非真实代码):

<el-table
  :data="tableData"
  style="width: 100%"
  max-height="250">
  <el-table-column
  	v-if="a == 1"
    fixed
    prop="date"
    label="日期"
    width="150">
  </el-table-column>
  <el-table-column
  	v-else
    prop="name"
    label="姓名"
    width="120">
  </el-table-column>
  <el-table-column
  	v-if="a == 2"
    prop="province"
    label="省份"
    width="120">
  </el-table-column>
  <el-table-column
  	v-else
    prop="city"
    label="市区"
    width="120">
  </el-table-column>
  <el-table-column
  	v-if="a == 3"
    prop="address"
    label="地址"
    width="300">
  </el-table-column>
  <el-table-column
  	v-else
    prop="zip"
    label="邮编"
    width="120">
  </el-table-column>
  <el-table-column
    fixed="right"
    label="操作"
    width="120">
    <template slot-scope="scope">
      <el-button
        @click.native.prevent="deleteRow(scope.$index, tableData)"
        type="text"
        size="small">
        移除
      </el-button>
    </template>
  </el-table-column>
</el-table>

解决办法

这是平铺出来的,从这里可以看到到处都是 v-ifv-else,其实这个问题解决起来也超级简单,平铺出来的也加上 key 关键词就好啦,只需要给 需要判断el-table-column 加上 key 即可,可以自己排列,也可以直接 :key="Math.random()"

<el-table
  :data="tableData"
  style="width: 100%"
  max-height="250">
  <el-table-column
  	v-if="a == 1"
  	:key="Math.random()"
    fixed
    prop="date"
    label="日期"
    width="150">
  </el-table-column>
  <el-table-column
  	v-else
  	:key="Math.random()"
    prop="name"
    label="姓名"
    width="120">
  </el-table-column>
  <el-table-column
  	v-if="a == 2"
  	:key="Math.random()"
    prop="province"
    label="省份"
    width="120">
  </el-table-column>
  <el-table-column
  	v-else
  	:key="Math.random()"
    prop="city"
    label="市区"
    width="120">
  </el-table-column>
  <el-table-column
  	v-if="a == 3"
  	:key="Math.random()"
    prop="address"
    label="地址"
    width="300">
  </el-table-column>
  <el-table-column
  	v-else
  	:key="Math.random()"
    prop="zip"
    label="邮编"
    width="120">
  </el-table-column>
  <el-table-column
    fixed="right"
    label="操作"
    width="120">
    <template slot-scope="scope">
      <el-button
        @click.native.prevent="deleteRow(scope.$index, tableData)"
        type="text"
        size="small">
        移除
      </el-button>
    </template>
  </el-table-column>
</el-table>

下方是我这边的渲染 table 方式,碰不到这种问题都…
在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux】CentOS桥接模式配置静态IP

文章目录 1 前言2 桥接模式和NAT模式有什么区别3 校园网环境下配置桥接模式 1 前言 最近在安装的虚拟机上面用mosquitto搭建MQTT服务器&#xff0c;但是很奇怪的是每次电脑上的测试软件能顺利连接服务器&#xff0c;但是连接电脑热点的外部设备却不行&#xff0c;让我很是困惑。…

程序员随时担心被抛弃......大厂外包值不值得去?

外包”这个词经常被人提及&#xff0c;而且也经常被我们所“鄙夷”&#xff0c;很多人都在四处问&#xff1a;“软件外包公司到底能不能去”&#xff1f; 外包公司到底能不能学到真正的技术&#xff1f; 外包大厂能不能去&#xff1f; 今天就给大家详细分享下外包的利与弊 做…

DNS缓存失效,死循环访问造成连接数瞬间飚高的问题

0.背景介绍 某服务domain.com.cn 之前DNS解析到服务真实地址10.1.1.11&#xff0c;后面需要对用户登录增加黑名单功能&#xff0c;于是在openresty针对服务domain.com.cn的特性完成了黑名单功能。黑名单功能已经上线几个月&#xff0c;但是DNS从服务真实地址10.1.1.11切换到ope…

如何远程自己家里电脑

即使您认真地将数据保存到云中&#xff0c;远程访问家庭或办公室计算机上的计算机文件也可能会改变游戏规则。也许您正坐在旅馆房间里&#xff0c;需要在家用电脑上运行一个程序。 或者您出门在外&#xff0c;想在手机上运行桌面应用程序。 这就是远程桌面工具的用武之地。配置…

【ansj分词,英文被转换为了小写】

ansj分词&#xff0c;英文被转换为了小写 没有识别到词表解决方案jieba分词 没有识别到词表 因为数据是大写&#xff0c;词表是大写&#xff0c;ansj将数据转换成了小写&#xff0c;无法匹配&#xff0c;词表失效。将词表改为小写就可以成功分词。 这里ansj我们的词表就是一列…

rdma IBV_SEND_FENCE标记位理解

参考rxe驱动代码&#xff0c; 在rxe_req.c文件里&#xff0c;取wqe时&#xff0c;会调用req_next_wqe函数&#xff0c; 在函数的最后有个判断&#xff0c; qp->req.wait_fence设置为1&#xff0c;然后返回NULL&#xff0c;所以rxe_requester函数直接退出了&#xff0c;不会…

【Linux】网络编程入门(TCP + UDP)

目录简述&#xff1a; 前言&#xff1a; 一、网络通信概述 二、网络编程主要函数 &#xff08;1&#xff09;socket函数 &#xff08;2&#xff09;bind函数 &#xff08;3&#xff09;bind函数 &#xff08;4&#xff09;accept函数 &#xff08;5&#xff09;connect…

AttributeError: ‘LTP‘ object has no attribute ‘seg‘解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

【Jenkins 2.x 实践指南】2.7 pipeline -- 章节小结

目录 一、 pipeline入门 1. pipeline 是什么 2. Jenkinsfile 又是什么 3. pipeline语法 的选择 4. 创建第一个pipeline - helloworld Stage 1: 创建任务 Stage 2: 创建流水线 - Hello World Stage 3: 编写 pipeline 声明 Stage 4: 执行 Stage 5: 点击 #1 查看日志 …

2023年 中国制造业这三大趋势不可忽视

政府要掏1个亿奖励制造企业搞发展&#xff0c;我国制造业大翻身的时代来了吗&#xff1f; 4月12日成都日报电&#xff0c;为支持制造业创新发展&#xff0c;支持制造业数字化、智能化和绿色化转型升级&#xff0c;培育高精尖特企业&#xff0c;政府给扶持政策不说&#xff0c;…

2.5亿行文本数据,导入到SqlServer需要多久?

今天测试了一下SqlServer的导入性能&#xff0c;数据库版本是SqlServer2008r2。 数据源是大概5000个文件&#xff0c;总共12.7G的大小的文本文件&#xff0c; 自己做的导入工具&#xff0c;利用多线程导入&#xff0c;总共耗费了大概1个小时。 导入后的总行数达到2.5亿多行&am…

Linux 安装tomcat教程

前言 PS&#xff1a;安装tomcat需要先配置jdk 1.Tomcat下载 1.1.Tomcat安装包下载 1. 可以选择直接在omcat官网Apache Tomcat - Apache Tomcat 9 Software Downloads下载&#xff0c;上传至linux服务器 1.2. 主机wget源下载 也可以通过直接在linux直接下载 #执行命令 wge…

Spring AOP: 多切面的顺序,性能及异常监控

目录标题 一、Sprig的AOP操作JDK动态代理CGLib动态代理基于xml开发Spring AOP基于注解开发Spring AOP 二、多切面的顺序基于注解的配置基于Ordered接口配置基于XML配置 三、性能及异常监控性能监控异常监控 四、工程目录及运行结果图 一、Sprig的AOP操作 JDK动态代理 //接口 …

港科夜闻|国务院港澳办主任夏宝龙在香港科大考察期间,表示对学校开展创科工作的鼓励及希望...

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、国务院港澳办主任夏宝龙在香港科大考察期间&#xff0c;表示对学校开展创科工作的鼓励及希望。考察期间&#xff0c;夏宝龙主任参观了香港科大的空气动力学和声学实验中心&#xff0c;以及香港科大先进显示与光电子技术国…

【花雕学AI】找出合适的提示词—让ChatGPT发挥出最大的潜力与价值

ChatGPT 是一种基于人工智能技术的自然语言处理系统&#xff0c;它可以回答各种问题&#xff0c;提供有用的信息和建议。然而&#xff0c;要让 ChatGPT 发挥出最大的潜力和价值&#xff0c;我们需要使用一些提示词来帮助它更好地理解我们的问题和需求。这些提示词包括明确、详细…

WPF 看板组件:Kanban Library for WPF 4.2 Crack

WPF 的看板组件。 适用于 WPF 的 DlhSoft 看板库可帮助您在 WPF 应用程序中创建交互式看板。它包括可自定义的状态、可扩展的组、可拖动的项目、可选菜单等等。 用于 WPF 功能的 DlhSoft 看板库 交互式板- 可定制的状态、可扩展的组、可拖动的项目、可选菜单。根据需要注入您自…

D. Restore Permutation(树状数组 + 二分)

Problem - D - Codeforces 一个由整数p1,p2,...,pn组成的数组&#xff0c;如果它包含1到n中的每一个数字恰好一次&#xff0c;则称为一个排列组合。例如&#xff0c;下面的数组就是排列组合&#xff1a; [3,1,2], [1], [1,2,3,4,5] 和 [4,3,1,2]. 下列数组不是排列组合&#x…

「线性DP」合唱队形

合唱队形 https://ac.nowcoder.com/acm/contest/24213/1011 题目描述 合唱队形是指这样的一种队形&#xff1a;设K位同学从左到右依次编号为1&#xff0c;2…&#xff0c;K&#xff0c;他们的身高分别为T1&#xff0c;T2&#xff0c;…&#xff0c;TK&#xff0c; 则他们的身高…

搭建静态网页

day3作业 请给openlab搭建web网站​ 网站需求&#xff1a;​ 1.基于域名[www.openlab.com](http://www.openlab.com)可以访问网站内容为 welcome to openlab!!!​ 2.给该公司创建三个子界面分别显示学生信息&#xff0c;教学资料和缴费网站&#xff0c;基于[www.openlab.com…

第三章(4):自然语言处理入门

第三章&#xff08;4&#xff09;&#xff1a;自然语言处理入门 在本节中&#xff0c;我们将在简单文本数据上&#xff08;例如一个句子上&#xff09;&#xff0c;执行一系列基本操作&#xff0c;来帮助你熟悉NLP的工作原理&#xff0c;其中一些技术在第三章&#xff08;2&…