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

6次阅读

共计 1086 个字符，预计需要花费 3 分钟才能阅读完成。

Invalid prop: custom validator check failed for prop “percentage”

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

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>

正文完