我们在实际项目中经常会遇到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的更多相关文章

  1. React报错之Unexpected default export of anonymous function

    正文从这开始~ 总览 当我们尝试使用默认导出来导出一个匿名函数时,会导致"Unexpected default export of anonymous function"警告.为了 ...

  2. 处理 javax.el.ELException: Failed to parse the expression 报错

    在JSP的表达式语言中,使用了  <h3>是否新Session:${pageContext.session.new}</h3>  输出Session是否是新的,此时遇到了  j ...

  3. sql查询语句报错处理——ERROR: failed to find conversion function from unknown to text

    今天遇到写存储过程遇到的一个小问题,在查询语句中使用到了自定义的数当做列的值,然后想给这一列起一个别名 ,就直接在后面用了 as 别名.执行存储过程,存储过程报错,ERROR: failed to f ...

  4. mysql创建表时,设置timestamp DEFAULT NULL报错1067 - Invalid default value for 'updated_at'

    问题背景: 线上的linux服务器上的mysql服务器中导出数据库的结构.想要在本地创建一个测试版本 导出后再本地mysql上运行却报错   1067 - Invalid default value ...

  5. 解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...

  6. 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...

  7. Vue+DataTables warning:table id=xxxx -Cannot reinitialize DataTable.报错解决方法

    问题描述: 使用DataTables来写列表,用vue来渲染数据,有搜索功能,每次点击搜索就会报错,如下图所示. 问题排查: 找了一系列原因,最后发现是我每次请求完数据之后都会添加分页功能,从而导致了 ...

  8. 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 ...

  9. 微信小程序 图片路径自动加上文件目录导致渲染报错问题

    最近 在做小程序时候,发现一些商品图片在渲染时一直报错,也不显示,但是控制台打印出来 的路径却有没有问题 报错提示出错的路径会在前面自动加上“page/**”,思索了之后想到了微信只能解释https的 ...

随机推荐

  1. Jquery 跨域访问 Lightswitch OData Service

    修改lightswitch .server project web.config.添加如下内容就可以实现对ApplicationData.svc/跨域访问 <system.webServer&g ...

  2. [HAOI 2015]按位或

    Description 题库链接 刚开始你有一个数字 \(0\) ,每一秒钟你会随机选择一个 \([0,2^n-1]\) 的数字,与你手上的数字进行或( \(\text{or}\) )操作.选择数字 ...

  3. Django之视图层

    一.视图函数 一个视图函数,简称视图,是一个简单的python函数,接收web请求并返回web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误等.在函数中必须写一个request的参 ...

  4. 运行 svgatest 显示 mmap /dev/zero Permission denied 解决办法

    答案是我在这个网站上找到的: 执行 xset dpms force off 命令就可以解决掉这个问题. 再次运行 svgatest 程序,得到了预期的结果,perfect!

  5. C#新功能--命名参数

    命名参数会潜在的改变编写代码的方式.这个新功能能使代码更容易阅读和理解. 例如,看一下System.IO名称空间中的File.Copy()方法,它一般构建为 File.Copy(@"C:\m ...

  6. HDFS 安全模式的理解

    安全模式是hadoop的一种保护机制,用于保证集群中的数据块的安全性. 当集群启动的时候,会首先进入安全模式.当系统处于安全模式时会检查数据块的完整性.假设我们设置的副本数(即参数dfs.replic ...

  7. IDEA新建javaWeb项目

    创建JavaWeb项目的步骤大致如下: 创建JavaWeb项目之前所需要的条件 - 安装jdk - 安装服务器(如:tomcat) - 安装idea 新建项目 New-->Project...

  8. 【Java深入研究】9、HashMap源码解析(jdk 1.8)

    一.HashMap概述 HashMap是常用的Java集合之一,是基于哈希表的Map接口的实现.与HashTable主要区别为不支持同步和允许null作为key和value.由于HashMap不是线程 ...

  9. Python sys 模块

    import sys # 把命令行参数返回一个 List,第一个元素是程序本身的路径 print(sys.argv) # 命令行运行 python3 sys_model.py klvchen hell ...

  10. 集合类--最详细的面试宝典--看这篇就够用了(java 1.8)

    看了一个星期源码,搜索上百篇博文,终于总结出了集合类的所有基础知识点,学集合,看这篇就够用了!!! 篇幅有点长, 如果你能全部理解,java最重要的集合就不怕了,秒过面试!!!(本篇素材来自网络,如有 ...