乐趣区

关于vue.js:记录VueelementUI报错及解决方法

  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>
退出移动版