🔍Vue.js 專案錯誤排查:解決 numericFields is not defined 與合併儲存格邏輯最佳化
前言 在前端開發專案中,處理表格數據與 Excel 匯出是常見的需求。 最近在專案中,遇到一個常見但讓人頭痛的錯誤訊息: Uncaught ReferenceError: numericFields is not defined 本文將用簡單的方式,帶你了解這個錯誤的成因、如何修改程式碼,以及如何最佳化「合併儲存格」與「數值加總」的邏輯。 問題場景:表格合併與數值加總 專案中需要達成以下功能: 同一個 APS_PLAN_NO 下,若 TFT4 相同,則 TFT5 欄位要合併。 數值欄位要加總,並以千分位格式輸出。 匯出到 Excel 時,也要套用相同邏輯。 在 Vue 的 rowSpans 計算邏輯中,初始版本如下: const rowSpans = computed ( () => { const rows = filteredData. value const spans = rows. map ( () => { const obj = {} tableHeaders. value . forEach ( key => obj[key] = 0 ) return obj }) ... return spans }) 但是,當我們在 exportToExcel() 使用時,出現了以下錯誤: Uncaught ReferenceError: numericFields is not defined 錯誤原因 這個錯誤訊息代表: 👉 numericFields 在程式中根本沒有宣告,所以瀏覽器不知道它是什麼。 舉例來說,假設我們在程式裡寫了這樣的判斷: if (numericFields. includes (key)) { // 處理數值欄位 } 但其實 numericFields 沒有定義,程式就會直接報錯。 解決方案:定義 numericFields ...
留言
張貼留言