🌐Vue 3 表格排序與合併儲存格完整解析：為什麼要先依 APS_PLAN_NO + TFT4 排序？

 

前言

在企業的生產排程系統（APS, Advanced Planning and Scheduling）中，常見的需求是表格顯示與Excel 匯出。
這些表格通常會有「合併儲存格」、「群組加總」、「排序」等功能。

但是，如果排序處理得不正確，就會導致數據顯示錯誤，甚至影響 Excel 匯出。今天我們要用 Vue 3 的範例，來解釋為什麼需要在 合併儲存格之前先做排序，以及如何正確排序才能保證結果正確。

---

問題背景

原本程式碼中的排序邏輯如下：

rows.sort((a, b) => {
  const planCmp = String(a.APS_PLAN_NO).localeCompare(String(b.APS_PLAN_NO))
  if (planCmp !== 0) return planCmp
  return String(a.SEQ_NO).localeCompare(String(b.SEQ_NO))
})

這段邏輯的問題是：

1. 只依 APS_PLAN_NO → SEQ_NO 排序，沒有處理到 TFT4。

2. 如果同一個 APS_PLAN_NO 下的 TFT4 不連續，會導致群組加總（特別是 TFT5）錯誤。

3. localeCompare 只做字典排序，例如 "A10" 會排在 "A2" 前，對數字不友好。

---

改良後的排序邏輯

我們的需求是：

1. 先依 APS_PLAN_NO 排序。

2. 在同一計劃下，依 TFT4 群組排序（空值放最後）。

3. 如果 TFT4 一樣，再依 SEQ_NO 做 Tie-breaker。

修改後的程式碼如下：

rows.sort((a, b) => {
  const lcOpts = { numeric: true, sensitivity: 'base' }
  const s = (v) => (v == null ? '' : String(v))

  // 1) APS_PLAN_NO
  const byPlan = s(a.APS_PLAN_NO).localeCompare(s(b.APS_PLAN_NO), undefined, lcOpts)
  if (byPlan !== 0) return byPlan

  // 2) TFT4（空值排最後）
  const emptyLast = (v) => {
    const x = s(v).trim()
    return x === '' ? '\u{10FFFF}' : x
  }
  const byTft4 = emptyLast(a.TFT4).localeCompare(emptyLast(b.TFT4), undefined, lcOpts)
  if (byTft4 !== 0) return byTft4

  // 3) SEQ_NO 作為 Tie-breaker
  return s(a.SEQ_NO).localeCompare(s(b.SEQ_NO), undefined, lcOpts)
})

---

差異比較表

項目	原本程式	改良後程式
排序依據	APS_PLAN_NO → SEQ_NO	APS_PLAN_NO → TFT4 → SEQ_NO
TFT4 排序	❌ 沒有	✅ 有
空值處理	❌ 可能排最前面	✅ 永遠排最後
數字排序	❌ 純字典序 ("A10" < "A2")	✅ 數字感知 ("A2" < "A10")
對 TFT5 加總影響	可能錯誤	正確合併

---

為什麼要在「合併儲存格」之前排序？

在 Vue 3 中，我們通常會用 rowSpans 來計算哪些欄位要合併儲存格。
如果資料沒有先排序，會出現以下問題：

• 同一個 TFT4 分散在不同區塊 → TFT5 加總錯誤

• 匯出 Excel 時，合併儲存格會被拆成多段 → 影響可讀性

• 前端顯示與後端資料不一致 → 使用者混淆

所以正確做法是：
👉 先排序，再做合併與加總

---

最佳實務：在 rowSpans 內統一處理排序

與其在多個地方重複排序，不如把排序邏輯放在 rowSpans 的 computed 中。
這樣可以確保：

• 前端表格顯示

• 合併儲存格

• 匯出 Excel

三者的排序結果一致。

範例如下：

const rowSpans = computed(() => {
  const src = filteredData.value
  const headers = tableHeaders.value
  const rows = src.map(r => ({ ...r }))

  // ✅ 在這裡做排序
  rows.sort(/* 改良版排序邏輯 */)

  // ✅ 接著才做群組加總與 rowspan 計算
})

---

結論

在 APS 系統的前端表格開發中，排序與合併的順序非常重要。
若不先排序，會導致加總錯誤與 Excel 匯出問題。

正確做法是：

1. 排序放在合併之前

2. 考慮群組欄位（TFT4）、空值處理、數字感知排序

3. 集中在 rowSpans 處理，確保顯示與匯出一致

這樣才能讓你的系統在前端顯示與 Excel 匯出時保持一致性，避免客戶看到錯誤的數據。