Table 表格

資料表格。支援排序（受控 / 非受控）、列篩選、列寬拖曳、多級表頭（children 無限巢狀）與固定列；設定 height 後啟用虛擬捲動（rowHeight 需與實際行高一致）。

表格

<template>
  <div style="max-width: 760px">
    <p class="demo-note">size="small" + maxHeight + 預設排序（defaultSortProp/defaultSortOrder）+ 篩選</p>
    <LhTable
      :data="rows"
      :columns="columns"
      size="small"
      stripe
      border
      :max-height="200"
      row-key="name"
      default-sort-prop="dynasty"
      default-sort-order="asc"
      :default-filtered-values="{ dynasty: ['宋'] }"
    >
      <template #price="{ value }">
        <span style="color: var(--lh-primary-color); font-weight: 600">{{ value }}</span>
      </template>
    </LhTable>
    <p class="demo-note">「朝代」列預設升序且預篩「宋」；表頭篩選按鈕可改條件。</p>
    <p class="demo-note" style="margin-top: 16px">巢狀表頭（children）+ resizable 拖寬 + formatter + 自訂 sorter</p>
    <LhTable :data="rows2" :columns="groupColumns" border :height="180" :row-height="40" :sorter="dynastySorter">
      <template #price="{ value }">
        <span style="color: var(--lh-primary-color); font-weight: 600">{{ value }}</span>
      </template>
    </LhTable>
    <p class="demo-note">「流傳」列用 formatter 格式化為「宮藏/民間」；「估價」列可拖寬（resizable）。</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    rows: [
      { name: '溪山行旅圖', dynasty: '宋', price: 1800 },
      { name: '富春山居圖', dynasty: '元', price: 2600 },
      { name: '千里江山圖', dynasty: '宋', price: 3200 },
      { name: '清明上河圖', dynasty: '宋', price: 1500 },
      { name: '韓熙載夜宴圖', dynasty: '五代', price: 2100 },
    ],
    rows2: [
      { name: '溪山行旅圖', dynasty: '宋', provenance: '宮藏', price: 1800 },
      { name: '富春山居圖', dynasty: '元', provenance: '宮藏', price: 2600 },
      { name: '清明上河圖', dynasty: '宋', provenance: '宮藏', price: 1500 },
      { name: '照夜白圖', dynasty: '唐', provenance: '民間', price: 980 },
    ],
    columns: [
      { prop: 'name', label: '畫作', width: 160 },
      {
        prop: 'dynasty',
        label: '朝代',
        width: 120,
        sortable: true,
        filters: [
          { text: '宋', value: '宋' },
          { text: '元', value: '元' },
          { text: '五代', value: '五代' },
        ],
      },
      { prop: 'price', label: '估價（萬）', width: 140, align: 'right', slot: 'price' },
    ],
    groupColumns: [
      {
        label: '藏品資訊',
        children: [
          { prop: 'name', label: '畫作', width: 150 },
          {
            prop: 'provenance',
            label: '流傳',
            width: 100,
            formatter: (r) => (r.provenance === '宮藏' ? '宮藏' : '民間'),
          },
        ],
      },
      {
        label: '估值',
        children: [
          { prop: 'dynasty', label: '朝代', width: 90, sortable: true },
          { prop: 'price', label: '估價（萬）', width: 130, align: 'right', resizable: true, slot: 'price' },
        ],
      },
    ],
  }),
  methods: {
    dynastySorter(a, b) {
      const order = ['唐', '五代', '宋', '元']
      return order.indexOf(String(a.dynasty)) - order.indexOf(String(b.dynasty))
    },
  },
}
</script>

Props

屬性	說明	類型	預設值
data	行資料	LhTableRow[]	[]
columns	列配置	LhTableColumn[]	[]
height	表體高度（設定後啟用虛擬捲動；數字為 px）	number \| string	—
maxHeight	非虛擬模式下的最大高度	number \| string	—
rowHeight	虛擬捲動行高（需與實際行高一致）	number	—
stripe / border	斑馬紋 / 儲存格邊框	boolean	false
size	尺寸	'small' \| 'default' \| 'large'	'default'
rowKey	行鍵欄位名	string	—
defaultSortProp / defaultSortOrder	預設排序列 / 方向	string / LhTableSortOrder	—
sorter	自訂排序函式	(a, b) => number	—
resizable	開啟列寬拖曳（仍需列級 resizable 配合，且列須為數字 width）	boolean	false
defaultFilteredValues	預設篩選狀態（非受控，鍵為列 prop）	Record<string, (string \| number)[]>	—
filteredValues	受控篩選狀態（:filtered-values.sync）	Record<string, (string \| number)[]>	—
sx	sx 快速佈局屬性	—	—

Events

sortChange ({ prop, order })、filterChange ({ prop, values })、columnResize ({ prop, width })、update:filteredValues、rowClick (row, index)

Slots

插槽	說明
<列 slot 名>	自訂儲存格，作用域參數 { row, column, index, value }（列由 column.slot 指定）
empty	無資料時內容（預設「暫無資料」）

無障礙

表頭 role="row" + 可排序列 aria-sort，表體 role="row"； 篩選面板為 role="menu"，拖寬把手設 aria-label 與 tabindex，支援鍵盤左右調整。