🔍Vue.js 專案錯誤排查：解決 numericFields is not defined 與合併儲存格邏輯最佳化

 

前言

在前端開發專案中，處理表格數據與 Excel 匯出是常見的需求。
最近在專案中，遇到一個常見但讓人頭痛的錯誤訊息：

Uncaught ReferenceError: numericFields is not defined

本文將用簡單的方式，帶你了解這個錯誤的成因、如何修改程式碼，以及如何最佳化「合併儲存格」與「數值加總」的邏輯。

---

問題場景：表格合併與數值加總

專案中需要達成以下功能：

1. 同一個 APS_PLAN_NO 下，若 TFT4 相同，則 TFT5 欄位要合併。

2. 數值欄位要加總，並以千分位格式輸出。

3. 匯出到 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

我們需要事先定義哪些欄位是「數值欄位」，並且要在 表格渲染 與 Excel 匯出 時套用千分位。

例如：

// ✅ 定義需要加總並轉換千分位的欄位
const numericFields = ['TFT5', 'QTY', 'AMOUNT']

接著在 rowSpans 與 exportToExcel 都能使用這個設定。

---

改良後程式碼

以下是最佳化後的版本，將合併邏輯、數值加總與千分位輸出整合：

const numericFields = ['TFT5', 'QTY', 'AMOUNT'] // 數值欄位

const rowSpans = computed(() => {
  const rows = filteredData.value
  const spans = rows.map(() => {
    const obj = {}
    tableHeaders.value.forEach(key => obj[key] = 0)
    return obj
  })

  let start = 0
  const tft4Key = 'TFT4'

  while (start < rows.length) {
    let end = start + 1
    while (end < rows.length && rows[end]['APS_PLAN_NO'] === rows[start]['APS_PLAN_NO']) {
      end++
    }

    tableHeaders.value.forEach(key => {
      let i = start
      while (i < end) {
        let j = i + 1
        let sum = Number(rows[i][key]) || 0

        while (
          j < end &&
          rows[j][key] === rows[i][key] &&
          !(key === 'TFT5' && rows[j][tft4Key] !== rows[i][tft4Key])
        ) {
          if (numericFields.includes(key)) {
            sum += Number(rows[j][key]) || 0
          }
          j++
        }

        const span = j - i
        spans[i][key] = span > 1 ? span : 1

        // ✅ 套用千分位
        if (numericFields.includes(key)) {
          rows[i][key] = sum.toLocaleString()
        }

        i = j
      }
    })
    start = end
  }
  return spans
})

---

匯出 Excel 時的處理

在 exportToExcel() 中，我們也要套用同樣的邏輯，才能確保輸出的檔案格式一致：

function exportToExcel() {
  const bodyRows = filteredData.value.map(row => {
    const newRow = {}
    tableHeaders.value.forEach(key => {
      if (numericFields.includes(key)) {
        newRow[key] = (Number(row[key]) || 0).toLocaleString()
      } else {
        newRow[key] = row[key]
      }
    })
    return newRow
  })

  // 轉換為 Excel 格式
  const ws = XLSX.utils.json_to_sheet(bodyRows)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
  XLSX.writeFile(wb, 'export.xlsx')
}

---

結論

1. numericFields is not defined 的原因是 忘記定義數值欄位陣列。

2. 我們需要統一在 表格顯示 與 Excel 匯出 中使用相同邏輯。

3. 數值欄位（如 TFT5、QTY、AMOUNT）需要加總，並轉換為千分位，才能保證使用者體驗一致。

---

👉 這樣的設計方式不僅能避免錯誤，也能節省渲染時間，讓 Vue.js 頁面與 Excel 匯出保持一致性。