el-table-column v-if条件渲染报错h.$scopedSlots.default is not a function
我们在实际项目中经常会遇到el-table-column条件渲染出现报错的情况
报错内容: h.$scopedSlots.default is not a function

究其原因,是因为表格是element-ui通过循环产生的,而vue在dom重新渲染时有一个性能优化机制,就是相同dom会被复用,这就是问题所在,所以,通过key去标识一下当前行是唯一的,不许复用,就行了。
代码示例如下:
添加 :key="Math.random()"
<el-table :data="tableData" style="width: 100%;">
<el-table-column type="selection" width="45"></el-table-column>
<el-table-column prop="applyTime" label="日期" min-width="150" :key="Math.random()"></el-table-column>
<el-table-column prop="productName" label="产品名称" min-width="120" :key="Math.random()"></el-table-column>
<el-table-column prop="orderNo" label="订单号" min-width="120" :key="Math.random()"></el-table-column>
<el-table-column prop="amount" label="金额" width="150" :key="Math.random()"></el-table-column>
<el-table-column prop="remark" label="备注" width="150" :key="Math.random()"></el-table-column>
<el-table-column fixed="right" label="操作" width="200" :key="Math.random()" v-if="currentTab === 'xxx'">
<template slot-scope="{row}">
<el-button type="text" size="small">查看详情</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
el-table-column v-if条件渲染报错h.$scopedSlots.default is not a function的更多相关文章
- React报错之Unexpected default export of anonymous function
正文从这开始~ 总览 当我们尝试使用默认导出来导出一个匿名函数时,会导致"Unexpected default export of anonymous function"警告.为了 ...
- 处理 javax.el.ELException: Failed to parse the expression 报错
在JSP的表达式语言中,使用了 <h3>是否新Session:${pageContext.session.new}</h3> 输出Session是否是新的,此时遇到了 j ...
- sql查询语句报错处理——ERROR: failed to find conversion function from unknown to text
今天遇到写存储过程遇到的一个小问题,在查询语句中使用到了自定义的数当做列的值,然后想给这一列起一个别名 ,就直接在后面用了 as 别名.执行存储过程,存储过程报错,ERROR: failed to f ...
- mysql创建表时,设置timestamp DEFAULT NULL报错1067 - Invalid default value for 'updated_at'
问题背景: 线上的linux服务器上的mysql服务器中导出数据库的结构.想要在本地创建一个测试版本 导出后再本地mysql上运行却报错 1067 - Invalid default value ...
- 解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function
Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...
- 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function
解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...
- Vue+DataTables warning:table id=xxxx -Cannot reinitialize DataTable.报错解决方法
问题描述: 使用DataTables来写列表,用vue来渲染数据,有搜索功能,每次点击搜索就会报错,如下图所示. 问题排查: 找了一系列原因,最后发现是我每次请求完数据之后都会添加分页功能,从而导致了 ...
- mysql 5.7 ERROR 1054(42S22) Unknown column 'password' in ‘field list’ 报错
mysql 忘记密码 报错?ERROR 1054(42S22) Unknown column 'password' in ‘field list’原因:5.7版本下的mysql数据库下已经没有pass ...
- 微信小程序 图片路径自动加上文件目录导致渲染报错问题
最近 在做小程序时候,发现一些商品图片在渲染时一直报错,也不显示,但是控制台打印出来 的路径却有没有问题 报错提示出错的路径会在前面自动加上“page/**”,思索了之后想到了微信只能解释https的 ...
随机推荐
- Python 浅谈编程规范和软件开发目录规范的重要性
最近参加了一个比赛,然后看到队友编程的代码,我觉得真的是觉得注释和命名规范的重要性了,因为几乎每个字符都要咨询他,用老师的话来说,这就是命名不规范的后续反应.所以此时的我意识到写一篇关于注释程序的重要 ...
- xhr.withCredentials发送跨域请求凭证
一.前言 今天遇到一个坑,浏览器请求数据的时候gg了.浏览器报错如下图: 因为请求头部设置了credentis mode is 'include', 从上面可以看出是Access-Control-Al ...
- eclipse4.6.1安装SpringSource Tool Suite(sts-eclipse)插件
1. Spring Tool Suite(sts)简介 Spring Tool Suite(sts)就是一个基于Eclipse的开发环境, 用于开发Spring应用程序.它提供了一个现成的使用环境来实 ...
- IdentityServer4 中文文档 -5- (简介)支持和咨询选项
IdentityServer4 中文文档 -5- (简介)支持和咨询选项 原文:http://docs.identityserver.io/en/release/intro/support.html ...
- 如何简单快速的修改Bootstrap
Bootstrap并不是单单意味着HTML/CSS界面框架,更确切的说,它改变了整个游戏规则.这个囊括了应有尽有的代码框架使得许多应用和网站的设计开发变得简便许多,而且它将大量的HTML框架普及成了产 ...
- maven配置之:<distributionManagement>snapshot快照库和release发布库
在使用maven过程中,我们在开发阶段经常性的会有很多公共库处于不稳定状态,随时需要修改并发布,可能一天就要发布一次,遇到bug时,甚至一天要发布N次.我们知道,maven的依赖管理是基于版本管理的, ...
- UdPloyer交付系统设计思路
宏观愿景: 一键搞定项目依赖环境,将软件交付过程管理化,实现DevOps研发测试运维一体化. 一.一站式版本交付生命周期管理 业务线[私有权限] 1.SVN源码交付 合主干.版本归档.拉分支.版本回 ...
- 设计模式之适配器模式(Adapter)(6)
简介 在实际的开发过程中,由于应用环境的变化(例如使用语言的变化),我们需要的实现在新的环境中没有现存对象可以满足,但是其他环境却存在这样现存的对象.那么如果将“将现存的对象”在新的环境中进行调用呢? ...
- Canvas-line.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- blfs(systemd版本)学习笔记-配置远程连接显示中文
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 远程连接的lfs系统需要具备以下环境便可在xshell或其他远程终端上面显示中文: 1.lfs主机设置中文编码(需要配置) 2. ...