📄Vue 3 表格數字千分位顯示與右對齊全攻略

 

前言

在企業管理系統中，常見的需求是把大量數字以「千分位」格式顯示，並且在表格中靠右對齊，以符合使用者閱讀習慣。本文將以 Vue 3 + Composition API 為範例，詳細解說如何在前端實作數字格式化＋靠右對齊，並搭配後端 C# 程式碼示例，幫助不熟悉前端的讀者快速上手。

---

一、需求背景

1. 顯示千分位：後端回傳的數量、金額等欄位需轉為 1,234 這種格式。

2. 靠右對齊：表格中所有數字欄位必須靠右顯示，非數字欄位或文字欄位仍維持置中或預設樣式。

3. 動態欄位：資料庫有動態 A001～A210 欄位，會依日期數量決定多少個欄位要顯示。

---

二、後端程式碼精要

後端以 .NET Core C# 撈取 APSZLCM 資料，並將 A001～Axxx 欄位的數值格式化為千分位字串（ToString("N0")）：

// 範例：將 decimal 欄位用 ToString("N0") 轉成含千分位的字串
decimal dValue = Convert.ToDecimal(qty.A01);
item.A001 = dValue.ToString("N0");  // e.g. "1,234"

重點：後端已回傳含千分位的「字串」，前端只要按字串渲染即可，不需重複加逗號。

 

---

三、前端實作步驟

1. 定義 CSS 類別

在 <style scoped> 中新增：

/* 數字欄位靠右對齊，等寬字體更整齊 */
.text-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

2. 撰寫格式化與偵測函式

在 <script setup> 區塊加入：

/**
 * 檢查是否為數字（含千分位字串）
 */
function isNumeric(val) {
  if (val == null || val === '') return false;
  if (typeof val === 'number') return true;
  const cleaned = String(val).replace(/,/g, '').trim();
  return cleaned !== '' && !isNaN(Number(cleaned));
}

/**
 * 再次格式化千分位，避免重複加逗號
 */
function formatWithThousands(val) {
  if (val == null || val === '') return '';
  const num = typeof val === 'number' ? val : Number(String(val).replace(/,/g, ''));
  return isNaN(num) ? String(val) : Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(num);
}

3. 在 <template> 動態套用類別與格式化

以動態 A 列為例，將原本的：

  <td v-for="(date, idx) in row.dateList" :key="idx">
  {{ row['a' + (idx+1).toString().padStart(3,'0')] }}
</td>

改為：

  <td
  v-for="(date, idx) in row.dateList"
  :key="idx"
  :class="{ 'text-right': isNumeric(row['a' + (idx+1).toString().padStart(3,'0')]) }"
>
  {{ formatWithThousands(row['a' + (idx+1).toString().padStart(3,'0')]) }}
</td>

同樣地，若有固定的數字欄位（如 DEMAND_WEEK_A），也採同樣寫法：

  <td
  v-for="col in rightColumns1"
  :key="col.key"
  :class="{ 'text-right': isNumeric(row[col.key]) }"
>
  {{ formatWithThousands(row[col.key]) }}
</td>

---

四、完整範例程式碼片段

<template>
  <table>
    <thead>…</thead>
    <tbody>
      <tr v-for="row in filteredData1" :key="row.OBJID">
        <!-- 左側文字欄位 -->
        <td>{{ row.PLANT }}</td>
        <!-- 動態數字欄位 -->
        <td
          v-for="(date, idx) in row.dateList"
          :key="idx"
          :class="{ 'text-right': isNumeric(getValue(row, idx)) }"
        >
          {{ formatWithThousands(getValue(row, idx)) }}
        </td>
        <!-- 固定右側數字欄位 -->
        <td
          v-for="col in rightColumns1"
          :key="col.key"
          :class="{ 'text-right': isNumeric(row[col.key]) }"
        >
          {{ formatWithThousands(row[col.key]) }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import { ref } from 'vue';

function isNumeric(val) { /* 如上 */ }
function formatWithThousands(val) { /* 如上 */ }

/** 取動態欄位值的 helper */
function getValue(row, idx) {
  const key = 'a' + (idx+1).toString().padStart(3,'0');
  return row[key];
}

// ... 其餘資料初始化、API 呼叫、filter 邏輯 ...
</script>

<style scoped>
.text-right { text-align: right; font-variant-numeric: tabular-nums; }
</style>

---

五、SEO 小技巧

1. 關鍵字密度：在文章前 50 字內出現「Vue 3」「千分位」「右對齊」等關鍵字。

2. 標題結構：Title 使用 H1、各段落用 H2/H3。

3. URL 優化：使用短而具描述性的 slug，如 /vue3-千分位-右對齊。

4. Meta 描述：在 Blogger 設定中填寫「Vue 3 表格數字千分位顯示與右對齊全攻略，示範前後端 C# + Composition API 解法」，增強點擊率。

5. 內部/外部連結：可補充連往官方 Vue 3 文件或 Intl.NumberFormat 相關 MDN 說明，提高文章權威度。