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的 ...
随机推荐
- C语言第四讲,typedef 关键字,以及作用域
C语言第四讲,typedef 关键字,以及作用域 一丶typedef关键字 在C语言中,有typedef 关键字,这个关键字的作用就是允许你为类型定义一个新的名字,也就是 起个别的名字 例如: typ ...
- SaltStack 安装、简单配置和远程执行
1:安装 修改hosts文件,必须保证Master端和Minion端都有完整的FQDN名示例如下: vim /etc/hosts 192.168.31.101 node2 node2.crazylin ...
- 使用Asp.Net Core MVC 开发项目实践[第一篇:项目结构说明]
先从下图看整体项目结构: Mango.Manager: 为后台管理项目 Mango.Web: 为前台项目 Mango.Framework.Core: 为常用的基础操作类项目 Mango.Framewo ...
- C语言之链表的使用
C语言链表初学者都说很难,今天就来为大家讲讲链表 讲链表之前不得不介绍一下结构体,在链表学习之前大家都应该已经学了结构体,都知道结构体里面能有许多变量,每个变量可以当做这个结构体的属性,例如: str ...
- 多啦爱梦~多啦A梦CSS3测试源代码
先直接看图片,感觉一下!一直以来,我们都在说浏览器对CSS3支持度这个问题.可是,鉴于知识认识水平问题,又没几个人真正了解CSS3是什么东西,和它在网站显示上的重要性.现在好了,日本某位大神写了个CS ...
- 正则表达式--C#正则表达式的符号及例子
正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑. C#中经常会遇到要查找某一个字 ...
- canvas学习和滤镜实现
最近学习了 HTML5 中的重头戏--canvas.利用 canvas,前端人员可以很轻松地.进行图像处理.其 API 繁多,这次主要学习常用的 API,并且完成以下两个代码: 实现去色滤镜 实现负色 ...
- Git的概念及常用命令
一.概念 Git是一个分布式的版本控制工具,区别于集中式管理的SVN. 二.优势 每个开发者都拥有自己的本地版本库,可以在本地任意修改代码.创建分支,不会影响到其他开发者的使用: 所有版本信息均保存在 ...
- Spring全家桶–SpringBoot Rest API
Spring Boot通过提供开箱即用的默认依赖或者转换来补充Spring REST支持.在Spring Boot中编写RESTful服务与SpringMVC没有什么不同.总而言之,基于Spring ...
- Linux常用基本命令:三剑客命令之-awk动作用法(1)
1,多个动作,怎么写? ghostwu@dev:~/linux/awk$ cat host.txt name ip地址 host1 192.168.1.1 host2 192.177.81.1 hos ...