記錄[Vue+elementUI]報錯及解決方法

灰灰發表於2022-11-23
VueUI
  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>

相關文章