首页 > 其他分享 >Vue进阶(幺贰陆):表格复用 TypeError: _self.$scopedSlots.default is not a function解决方法

Vue进阶(幺贰陆):表格复用 TypeError: _self.$scopedSlots.default is not a function解决方法

时间:2023-06-16 20:01:00浏览次数:41  
标签:function Vue scopedSlots 进阶 标签 复用 TypeError key 应用

(文章目录)

一、前言

在使用 elementUIel-table 组件时,表头应用v-if判断来动态显示,正常来说这样的操作是没有问题的,但是如果在这基础上使用 <template slot-scope="scope"> 操作的话,表头一旦切换就会报错,错误信息如下:

_self.$scopedSlots.default is not a function

二、解决方法

当应用v-for或者v-if切换标签,多个相同的标签被渲染时,如果不添加key来区分则会出现元素复用的情况。而原本这些标签都是独立的,故需要添加key来做区分!

可以给包含 <template slot-scope="scope"><el-table-column>标签列加上属性 key 属性。如无唯一标识,可应用:key=Math.random().

三、原理解析

官方提示用key属性管理复用元素 在这里插入图片描述 在这里插入图片描述 注:不推荐使用index作为key,因为这种做法会导致某些节点被错误地原地复用,具体表现如下:

  • 性能损耗:列表渲染时会导致变动项往后的所有列表节点(内容)的更新(相当于key没发挥作用)。
  • 出现错误:某些节点在错误的位置被复用。(例如当列表项中使用到复选框时)

四、拓展阅读

标签:function,Vue,scopedSlots,进阶,标签,复用,TypeError,key,应用
From: https://blog.51cto.com/shq5785/6502131

相关文章

  • OpenFunction v1.1.0 发布:新增 v1beta2 API,支持 Dapr 状态管理
    OpenFunction是一个开源的云原生FaaS(FunctionasaService,函数即服务)平台,旨在帮助开发者专注于业务逻辑的研发。在过去的几个月里,OpenFunction社区一直在努力工作,为OpenFunction1.1.0版本的发布做准备。今天,我们非常高兴地宣布OpenFunction1.1.0已经发布了!感谢社区各位......
  • python: enforcing type check on function using decorator
     deftypeassert(*ty_args,**ty_kwargs):"""利用装饰器对函数参数强制性类型检查enforcingtypecheckonfunctionusingdecorator:paramty_args::paramty_kwargs::return:"""......
  • Closure as the function parameter
    Closureasthefunctionparameter(JinQing’sColumn,Mar.,2022)Itisbesttoletthefunctiontakeaclosuretraitastheparameterinsteadofafunctionpointer.fnfoo(f:fn()){f()}fnmain(){foo(||println!("hello"));leta......
  • [从jQuery看JavaScript]-匿名函数与闭包(Anonymous Function and Closure)
    jQuery片段:1.(function(){2.//这里忽略jQuery所有实现3.})();当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来!真神奇哦!嘿嘿!胡闹到此为止。在这一节,我们碰到的jQuery片段是一组立即运行的匿名函数。而这种用法在论坛上也曾引起过激辩......
  • 【Azure 应用服务】Azure Function App在部署时候遇见 503 ServiceUnavailable
    问题描述在VSCode中编写好AzureFunctionApp代码后,通过 funcazurefunctionapppublish部署失败,抛出503ServiceUnavailable错误。Gettingsitepublishinginfo...Creatingarchiveforcurrentdirectory...Performingremotebuildforfunctionsproject.Deleting......
  • opcenter camstar designer基础知识-- Functions
     已编写函数来执行各种任务,如简单的算术、搜索复杂的数据结构、数据库查询、报告编写、数据收集、数据验证等等。函数具有零个或更多参数,并且由ActiveX组件实施。包含在CLF中的函数可以执行工作。函数有权访问系统的内部对象设计,它通过操纵该设计来完成工作。以下主题提供有......
  • 【Azure 应用服务】Azure Function App在部署时候遇见 503 ServiceUnavailable
    问题描述在VSCode中编写好AzureFunctionApp代码后,通过 funcazurefunctionapppublish部署失败,抛出503ServiceUnavailable错误。Gettingsitepublishinginfo...Creatingarchiveforcurrentdirectory...Performingremotebuildforfunctionsproject.Dele......
  • 【JS基础】Function构造函数
    Function()构造函数创建了一个新的Function对象,直接调用构造函数可以动态创建函数,与eval(可能访问到本地作用域)不同的是,Function构造函数只创建全局执行的函数。constsum=newFunction('a','b','returna+b')console.log(sum(1,2)); 参考:Function()构造函数-J......
  • 机器学习模型中的损失函数loss function
    1.概述在机器学习算法中,有一个重要的概念就是损失函数(LossFunction)。损失函数的作用就是度量模型的预测值与真实值之间的差异程度的函数,且是一个非负实值函数。对于分类问题损失函数通常可以表示成损失项和正则项的和,即有如下的形式:其中,为损失项,为正则项。的具体形式如下:对于损失......
  • 【Azure 应用服务】Azure Data Factory中调用Function App遇见403 - Forbidden
    问题描述在AzureDataFactory(数据工厂)中,调用同在Azure中的FunctionApp函数,却出现403-Forbidden错误。截图如下:  问题解答访问AzureFunctionApp遇见403-Forbidden错误,这是因为FunctionApp启用了限制访问功能,在其中配置了允许访问的IP地址列表,而从ADF中发出的请求使用的I......