🌐Vue 3 表格欄位換行處理：如何保留逗號並換行顯示（含 LCM1 與 MATERIAL1 實作範例）

-

前言

在企業內部系統或資料分析工具中，我們經常需要在表格中顯示大量文字資料，例如產品編號、客戶資訊、或製造流程代碼。
有時候，資料來源會以 逗號 ( , ) 或 分號 ( ; ) 作為分隔符號，但在表格顯示時，如果全部內容擠在同一行，不僅不易閱讀，也容易造成橫向捲動條過長的問題。

今天，我要分享一個 Vue 3 的實作方法，可以讓表格欄位（例如 LCM1 與 MATERIAL1）在遇到逗號或分號時自動換行，並且 保留逗號（方便辨識資料的原本分隔）。



需求說明

假設資料來源是這樣的：

AAA,BBB;CCC,DDD

我們希望在表格中顯示成這樣：

AAA,
BBB
CCC,
DDD

規則如下：

  1. 逗號 ( , ) → 保留逗號後換行。

  2. 分號 ( ; ) → 直接換行，不保留分號。

  3. 保留原本的資料順序與內容。



核心解法：toMultiline() 函式 

// 將資料依規則換行：保留逗號換行，分號直接換行
function toMultiline(val) {
  if (val == null) return ''
  return String(val)
    .split(/([,;])/g)          // 分割同時保留分隔符
    .reduce((acc, part) => {
      if (part === ',') {
        acc.push(',')          // 保留逗號
        acc.push('\n')         // 再換行
      } else if (part === ';') {
        acc.push('\n')         // 分號直接換行
      } else {
        acc.push(part.trim())  // 其他內容去除多餘空白
      }
      return acc
    }, [])
    .join('')
    .replace(/\n\s+/g, '\n')    // 去除換行後多餘空白
    .trim()
}

這段程式碼的關鍵點是：

  • split(/([,;])/g)：利用正則表達式分割字串，並且保留逗號與分號作為獨立項目。

  • reduce()：用陣列累加的方式，逐步組合出符合規則的新字串。

  • 保留逗號再換行：遇到 , 就先加上逗號再加上 \n。

  • 分號換行：遇到 ; 直接換行，不保留分號。

  • white-space: pre-line;：透過 CSS 讓 \n 在 HTML 表格中正常顯示為換行。



在 Vue 3 中套用

在 fetchPlanData() 將資料轉換時，對 LCM1 與 MATERIAL1 欄位套用 toMultiline()： 

const rows = raw.map((item) => {
  const o = {}
  Object.keys(item).forEach((k) => { 
    const nk = normalizeKey(k)
    let v = item[k]
    if (nk === 'MATERIAL1' || nk === 'LCM1') {
      v = toMultiline(v) // 套用換行規則
    }
    o[nk] = v
  })
  return o
})


CSS 設定（保證換行生效）

td.material-multiline {
  white-space: pre-line;
  word-break: break-all;
  text-align: left;
}

並在 <template> 中針對這兩個欄位加上 material-multiline 類別： 

<td :class="{
  'material-multiline': hdr === 'MATERIAL1' || hdr === 'LCM1',
  'text-right': isNumericColumn(hdr)
}">
  {{ row[hdr] }}
</td>


實作效果

原始資料：

AAA,BBB;CCC,DDD

表格顯示：

AAA,
BBB
CCC,
DDD

使用者不需要橫向捲動就能清楚閱讀每個項目，尤其在多筆資料對比時可讀性大幅提升。



為什麼這樣做比較好？

  • 保留原本資料的分隔符號（例如逗號）有助於對照資料庫或 API 原始資料。

  • 視覺分行讓資料更容易對齊與閱讀，減少因為一行過長造成的視覺疲勞。

  • CSS 配合 pre-line 能保持簡潔，不需要額外使用 <br> 標籤。

  • 可擴展性高，未來若需要針對其他符號做不同處理，可以直接修改 toMultiline()。



結論

這個方法雖然簡單，但對於需要處理長字串顯示的前端專案非常實用。
特別是在 Vue 3 這種響應式框架中，只要在資料進入狀態管理前做一次轉換，就能在表格、匯出 Excel 等各種場景中保持一致的換行規則。

如果你也在做內部系統或資料分析平台，不妨試試這種 「保留逗號並換行」 的技巧，能讓使用者體驗大幅提升。

留言

張貼留言

這個網誌中的熱門文章

🛠【ASP.NET Core + Oracle】解決 ORA-00904 "FALSE": 無效的 ID 錯誤與資料欄位動態插入顯示問題

-
  🔍 問題描述 在開發群創光電內部的 APS 排程系統（使用 ASP.NET Core + Vue 3 + Oracle），前端發生多筆錯誤訊息： Request failed with status code 500 Oracle.ManagedDataAccess.Client.OracleException: ORA-00904: "FALSE": 無效的 ID 這是 Oracle 資料庫對布林值處理不一致造成的錯誤，我們後端嘗試將某個欄位 .Where(x => x.FLAG == false) 寫法，經由 EF Core 轉成 SQL： SELECT * FROM TABLE WHERE FLAG = FALSE 而 Oracle 並不支援 FALSE 關鍵字作為布林值 → 導致查詢失敗。 🔧 解決方案 1：避免布林值直接進入 LINQ to SQL EF Core + Oracle 不支援下列語法： .Where(x => x.IsActive == false) // ❌ Oracle 無法解析 FALSE ✅ 解法 ：將布林判斷移至 .ToList() 之後，變成記憶體篩選： var list = await db.Table.Where(x => x.Version == ver).ToListAsync(); var filtered = list.Where(x => !x.IsActive).ToList(); // ✅ 在記憶體中比對布林 🔧 解決方案 2：安全轉換 SEQ_NO 為 Decimal 後端為了將前段表 APSZFRONT 的 SEQ_NO 與 APSZLCM 的 APS_PLAN_SEQ 對應，用到了這段程式碼： Convert.ToDecimal(front.SEQ_NO) 但一旦 SEQ_NO 含有英文字母（例如 GN140CHCAAE90S_20250811_1_531 ），就會丟出 FormatException → 造成 HTTP 500。 ✅ 正確寫法（TryParse 避免失敗） ： de...
閱讀完整內容

🛠【實戰排除教學】從 VS Code 的 _logger 錯誤，到 PowerShell 找不到 npm/serve，再到 Oracle ORA-03135 連線中斷——一次搞懂！

-
  前言 這篇文章把你在實務中 可能一次遇到的三類問題 整合成一篇易懂、可照做的排錯筆記： C# / EF Core ：VS Code 顯示 CS0103: The name '_logger' does not exist 前端部署預覽 ：PowerShell 說找不到 serve 、更慘的是連 npm 、 node 也找不到 Oracle 連線中斷 ：API 查詢跑一陣子後直接噴 ORA-03135: connection lost contact 我會用工程師口吻、但寫給不熟悉的人也看得懂的方式，帶你一步步修好。 一、VS Code： _logger 不存在（CS0103） 問題現象 在 catch 裡面呼叫 _logger.LogError(...) ，卻出現： CS0103: The name '_logger' does not exist in the current context 代表 類別裡沒有宣告或注入 _logger 。 正確作法：在類別中注入 Logger 類別欄位 using Microsoft.Extensions.Logging; public class ApsDataProcessor { private readonly AppDbContext _context; private readonly ILogger _logger; public ApsDataProcessor(AppDbContext context, ILogger logger) { _context = context; _logger = logger; } public async Task > GetDataByVersionA(string version) { try ...
閱讀完整內容

🔎如何在 Oracle PL/SQL 儲存過程中為文字欄位加入換行符號（CHR(10)）——以 Updlcmremark 為例

-
  前言 在企業級系統開發中，我們常會將複雜的商業邏輯封裝成 Oracle PL/SQL 的儲存過程（Stored Procedure），以便重複使用並確保邏輯一致性。 這次的案例是 修改 Updlcmremark 儲存過程 ，目的是讓產出的 REMARK 欄位在資料庫中具有「換行」格式，而不只是用逗號分隔，方便報表與前端顯示。 問題背景 原本的 Updlcmremark 過程中，對於某些資料（例如來自 APS_Z_LCM_CHECK 的 process_step 與 eq ），是直接用字串拼接的方式： v_remark := NVL(v_process_step, '') || '' || NVL(v_eq, ''); 這種寫法的缺點是： 資料之間沒有任何分隔符號，閱讀性差。 若要在前端或報表中換行，必須額外處理，不方便。 如果一個 SEQ_NO 有多筆資料，這種寫法只會取到第一筆（ FETCH 單筆），其他資料會被忽略。 改進需求 參考同系統的另一支儲存過程 Updmremark ，該過程在拼接文字時不僅使用逗號分隔，還加上換行符號： || ' ,' || CHR(10) 這樣在資料庫中儲存的內容，就會自帶換行，即使直接查詢或匯出到 Excel 報表，也能保有可讀性。 解決方案 方案一：簡單版（單筆取值加換行） 如果 unknown 游標一次只需要取一筆資料，可以直接在原本字串後加上逗號與換行符號： v_remark := NVL(v_process_step, '') || ' ' || NVL(v_eq, '') || ' ,' || CHR(10); 這樣每筆 remark 都會以「逗號 + 換行」結尾。 方案二：完整版（多筆累加加換行） 如果 unknown 游標可能有多筆資料，則應該使用 FOR rec_...
閱讀完整內容