头图

记录[Vue+elementUI]报错及解决方法

  1. Invalid prop: custom validator check failed for prop "percentage"

当出现这种Invalid prop错误的时候,应该去查一下elementUI的文档,看一下prop的取值范围,例如:percentage的取值范围就是0-100之间。我在算百分比的时候,当数据更新的时候,没有即时更新分母,导致算出来的数据存在大于100的值。

  1. Cannot read properties of undefined (reading ‘0’)

代码背景:一个很大的页面嵌套了几个component(func-arrow-table是其中之一)

<func-arrow-table :comparedFunctions.sync="comparedFunctions" :performIndex="performIndex" :sessionList="sessionList"
                  :tableData.sync="tableData" :deleteFunction="deleteFunction" :clickBarChart="clickBarChart"
                  :isGroupData="false"></func-arrow-table>

func-arrow-table的主题是一个el-table,左一列是根据prop comparedFunctions计算compute而来的,表头是根据sessionList渲染出来的,表格的数据则是tableData。这个表格里的comparedFunctions是可以根据用户需要动态增删的,也就是说,comparedFunctions和tableData需要设置为sync。
但是,在实际增添数据的时候,控制台里还是会报错。和mentor研究了一下,原因是因为,el-table需要渲染的数据没有被一把赋值,会有先后顺序,所以,存在当tableData 或者 comparedFunctions以及被传递过去的时候,另一个值还没有准备好,因此访问错误。解决方法如下,将所有el-table画表所需要的数据变成一个结构体,一把传过去。

<func-arrow-table :tableDataSet="tableDataSet" :performIndex="performIndex" :sessionList="sessionList"
                  :deleteFunction="deleteFunction" :clickBarChart="clickBarChart"
                  :isGroupData="true"></func-arrow-table>

在职全栈开发工程师

1 声望
0 粉丝
0 条评论
推荐阅读
近期Psql相关业务的收获:agg函数对于null值的处理/ array_agg()/ Unmarshal的性能消耗和工作原理
【case 1】项目背景:需要返回一些GC的统计数据。相关数据存在frame这张表内,表中的数据一行就是一帧的数据,可以理解为记录了这一帧内的性能信息。与需求相关的col是GcChartSample,是一个json类型的数据,里面...

灰灰阅读 717

Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 13.4k评论 7

给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.6k

封面图
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等

似曾相识17阅读 29.1k评论 7

一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]

jigsaw16阅读 8.4k评论 3

你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.7k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图

在职全栈开发工程师

1 声望
0 粉丝
宣传栏