Table | Sard

介绍

用于展示多条结构类似的数据，支持固定表头、固定列、多级表头、行列合并、自定义渲染等功能。

代码演示

基础使用

通过 columns 定义列结构，data 传入数据。

vue tsvue js

vue

<template>
  <s-table :columns="partialColumns" :data="partialData"></s-table>
</template>

<script setup lang="ts">
import { partialColumns, partialData } from './data'
</script>

vue

<template>
  <s-table :columns="partialColumns" :data="partialData"></s-table>
</template>

<script setup lang="js">
import { partialColumns, partialData } from './data'
</script>

data.ts

tsjs

import type { TableColumnProps } from 'sard'

export const columns: TableColumnProps[] = [
  {
    label: 'ID',
    prop: 'id',
    width: 40,
    fixed: 'start',
  },
  {
    label: '日期',
    prop: 'date',
    width: 100,
  },
  {
    label: '姓名',
    prop: 'name',
    width: 80,
  },
  {
    label: '城市',
    prop: 'city',
    width: 80,
  },
  {
    label: '电话',
    prop: 'tel',
    width: 100,
  },
  {
    label: '地址',
    prop: 'address',
    width: 200,
  },
]

export const multiColumns: TableColumnProps[] = [
  {
    label: 'ID',
    prop: 'id',
    width: 40,
    fixed: 'start',
  },
  {
    label: '日期',
    prop: 'date',
    width: 100,
  },
  {
    label: '收货地址',
    columns: [
      {
        label: '姓名',
        prop: 'name',
        width: 80,
      },
      {
        label: '地址信息',
        columns: [
          {
            label: '城市',
            prop: 'city',
            width: 80,
          },
          {
            label: '电话',
            prop: 'tel',
            width: 100,
          },
          {
            label: '地址',
            prop: 'address',
            width: 200,
          },
        ],
      },
    ],
  },
  {
    label: '操作',
    prop: 'action',
    width: 80,
    fixed: 'end',
    slot: 'action',
  },
]

export const partialColumns = [
  {
    label: 'ID',
    prop: 'id',
  },
  {
    label: '姓名',
    prop: 'name',
  },
  {
    label: '城市',
    prop: 'city',
  },
]

export const data = Array(20)
  .fill(0)
  .map((_, i) => {
    return {
      id: i + 1,
      name: '张三',
      city: '广州',
      tel: '138********',
      address: '广东省广州市**路22号',
      date: '2024-12-12',
    }
  })

export const partialData = data.slice(0, 4)

export const columns = [
  {
    label: 'ID',
    prop: 'id',
    width: 40,
    fixed: 'start',
  },
  {
    label: '日期',
    prop: 'date',
    width: 100,
  },
  {
    label: '姓名',
    prop: 'name',
    width: 80,
  },
  {
    label: '城市',
    prop: 'city',
    width: 80,
  },
  {
    label: '电话',
    prop: 'tel',
    width: 100,
  },
  {
    label: '地址',
    prop: 'address',
    width: 200,
  },
]
export const multiColumns = [
  {
    label: 'ID',
    prop: 'id',
    width: 40,
    fixed: 'start',
  },
  {
    label: '日期',
    prop: 'date',
    width: 100,
  },
  {
    label: '收货地址',
    columns: [
      {
        label: '姓名',
        prop: 'name',
        width: 80,
      },
      {
        label: '地址信息',
        columns: [
          {
            label: '城市',
            prop: 'city',
            width: 80,
          },
          {
            label: '电话',
            prop: 'tel',
            width: 100,
          },
          {
            label: '地址',
            prop: 'address',
            width: 200,
          },
        ],
      },
    ],
  },
  {
    label: '操作',
    prop: 'action',
    width: 80,
    fixed: 'end',
    slot: 'action',
  },
]
export const partialColumns = [
  {
    label: 'ID',
    prop: 'id',
  },
  {
    label: '姓名',
    prop: 'name',
  },
  {
    label: '城市',
    prop: 'city',
  },
]
export const data = Array(20)
  .fill(0)
  .map((_, i) => {
    return {
      id: i + 1,
      name: '张三',
      city: '广州',
      tel: '138********',
      address: '广东省广州市**路22号',
      date: '2024-12-12',
    }
  })
export const partialData = data.slice(0, 4)

隐藏表头

设置 show-header 为 false 可以隐藏表头。

vue tsvue js

vue

<template>
  <s-table :columns="partialColumns" :data="partialData" :show-header="false"></s-table>
</template>

<script setup lang="ts">
import { partialColumns, partialData } from './data'
</script>

vue

<template>
  <s-table :columns="partialColumns" :data="partialData" :show-header="false"></s-table>
</template>

<script setup lang="js">
import { partialColumns, partialData } from './data'
</script>

下边框

设置 underlined 属性为单元格添加下边框。

vue tsvue js

vue

<template>
  <s-table underlined :columns="partialColumns" :data="partialData"></s-table>
</template>

<script setup lang="ts">
import { partialColumns, partialData } from './data'
</script>

vue

<template>
  <s-table underlined :columns="partialColumns" :data="partialData"></s-table>
</template>

<script setup lang="js">
import { partialColumns, partialData } from './data'
</script>

边框

设置 border 属性为单元格添加边框。

vue tsvue js

vue

<template>
  <s-table bordered :columns="partialColumns" :data="partialData"></s-table>
</template>

<script setup lang="ts">
import { partialColumns, partialData } from './data'
</script>

vue

<template>
  <s-table bordered :columns="partialColumns" :data="partialData"></s-table>
</template>

<script setup lang="js">
import { partialColumns, partialData } from './data'
</script>

有条纹的

设置 striped 属性启用斑马纹样式。

vue tsvue js

vue

<template>
  <s-table striped underlined :columns="partialColumns" :data="partialData"></s-table>
</template>

<script setup lang="ts">
import { partialColumns, partialData } from './data'
</script>

vue

<template>
  <s-table striped underlined :columns="partialColumns" :data="partialData"></s-table>
</template>

<script setup lang="js">
import { partialColumns, partialData } from './data'
</script>

自定义宽度

通过列的 width 属性设置列宽，支持数字（px）或带单位的字符串。

vue tsvue js

vue

<template>
  <s-table bordered :columns="columns" :data="partialData"></s-table>
</template>

<script setup lang="ts">
import { partialData } from './data'

const columns = [
  {
    label: 'ID',
    prop: 'id',
    width: 50,
  },
  {
    label: '姓名',
    prop: 'name',
    width: 100,
  },
  {
    label: '城市',
    prop: 'city',
  },
]
</script>

vue

<template>
  <s-table bordered :columns="columns" :data="partialData"></s-table>
</template>

<script setup lang="js">
import { partialData } from './data'
const columns = [
  {
    label: 'ID',
    prop: 'id',
    width: 50,
  },
  {
    label: '姓名',
    prop: 'name',
    width: 100,
  },
  {
    label: '城市',
    prop: 'city',
  },
]
</script>

固定表头

设置 height 或 maxHeight 属性限制表格高度，表头将自动固定在顶部。

vue tsvue js

vue

<template>
  <s-table underlined :columns="partialColumns" :data="data" style="height: 200px"></s-table>
</template>

<script setup lang="ts">
import { partialColumns, data } from './data'
</script>

vue

<template>
  <s-table underlined :columns="partialColumns" :data="data" style="height: 200px"></s-table>
</template>

<script setup lang="js">
import { partialColumns, data } from './data'
</script>

固定列

通过列的 fixed 属性将列固定在左侧（true 或 'start'）或右侧（'end'）。

vue tsvue js

vue

<template>
  <s-table underlined :columns="columns" :data="partialData"></s-table>
</template>

<script setup lang="ts">
import { columns, partialData } from './data'
</script>

vue

<template>
  <s-table underlined :columns="columns" :data="partialData"></s-table>
</template>

<script setup lang="js">
import { columns, partialData } from './data'
</script>

固定表头和列

可以同时固定表头和列。

vue tsvue js

vue

<template>
  <s-table underlined :columns="columns" :data="data" style="height: 200px"></s-table>
</template>

<script setup lang="ts">
import { columns, data } from './data'
</script>

vue

<template>
  <s-table underlined :columns="columns" :data="data" style="height: 200px"></s-table>
</template>

<script setup lang="js">
import { columns, data } from './data'
</script>

多级表头

在 columns 中嵌套 columns 即可实现多级表头。

vue tsvue js

vue

<template>
  <s-table bordered :columns="multiColumns" :data="data" style="height: 250px">
    <template #action="{ row }">
      <s-button size="small" variant="link" @click="toast(row.id)">编辑</s-button>
    </template>
  </s-table>
</template>

<script setup lang="ts">
import { toast } from 'sard'
import { multiColumns, data } from './data'
</script>

vue

<template>
  <s-table bordered :columns="multiColumns" :data="data" style="height: 250px">
    <template #action="{ row }">
      <s-button size="small" variant="link" @click="toast(row.id)">编辑</s-button>
    </template>
  </s-table>
</template>

<script setup lang="js">
import { toast } from 'sard'
import { multiColumns, data } from './data'
</script>

合并行或列

通过 span-method 属性动态合并行或列。函数接收 { row, rowIndex, column, columnIndex }，返回 { rowspan, colspan } 或 [rowspan, colspan]。返回 { rowspan: 0, colspan: 0 } 表示该单元格被合并。

vue tsvue js

vue

<template>
  <s-table bordered :columns="columns" :data="data" :span-method="spanMethod"></s-table>
</template>

<script setup lang="ts">
const columns = [
  { label: 'ID', prop: 'id', width: 60 },
  { label: '日期', prop: 'date', width: 120 },
  { label: '姓名', prop: 'name', width: 80 },
  { label: '城市', prop: 'city', width: 80 },
  { label: '电话', prop: 'tel', width: 120 },
  { label: '地址', prop: 'address', width: 180 },
]

const data = [
  {
    id: 1,
    date: '2024-01-01',
    name: '张三',
    city: '广州',
    tel: '13800001111',
    address: '天河区**路1号',
  },
  {
    id: 1,
    date: '2024-01-01',
    name: '张三',
    city: '广州',
    tel: '13800002222',
    address: '天河区**路1号',
  },
  {
    id: 2,
    date: '2024-01-02',
    name: '李四',
    city: '深圳',
    tel: '13900001111',
    address: '南山区**路2号',
  },
  {
    id: 2,
    date: '2024-01-02',
    name: '李四',
    city: '深圳',
    tel: '13900002222',
    address: '南山区**路2号',
  },
  {
    id: 3,
    date: '2024-01-03',
    name: '王五',
    city: '北京',
    tel: '13700001111',
    address: '朝阳区**路3号',
  },
  {
    id: 4,
    date: '2024-01-04',
    name: '赵六',
    city: '上海',
    tel: '13600001111',
    address: '浦东新区**路4号',
  },
]

const spanMethod = ({ row, rowIndex, columnIndex }: any) => {
  if (columnIndex === 3) {
    if (rowIndex > 0 && data[rowIndex - 1].city === row.city) {
      return { rowspan: 0, colspan: 0 }
    }
    let rowspan = 1
    while (rowIndex + rowspan < data.length && data[rowIndex + rowspan].city === row.city) {
      rowspan++
    }
    return { rowspan, colspan: 1 }
  }
}
</script>

vue

<template>
  <s-table bordered :columns="columns" :data="data" :span-method="spanMethod"></s-table>
</template>

<script setup lang="js">
const columns = [
  {
    label: 'ID',
    prop: 'id',
    width: 60,
  },
  {
    label: '日期',
    prop: 'date',
    width: 120,
  },
  {
    label: '姓名',
    prop: 'name',
    width: 80,
  },
  {
    label: '城市',
    prop: 'city',
    width: 80,
  },
  {
    label: '电话',
    prop: 'tel',
    width: 120,
  },
  {
    label: '地址',
    prop: 'address',
    width: 180,
  },
]
const data = [
  {
    id: 1,
    date: '2024-01-01',
    name: '张三',
    city: '广州',
    tel: '13800001111',
    address: '天河区**路1号',
  },
  {
    id: 1,
    date: '2024-01-01',
    name: '张三',
    city: '广州',
    tel: '13800002222',
    address: '天河区**路1号',
  },
  {
    id: 2,
    date: '2024-01-02',
    name: '李四',
    city: '深圳',
    tel: '13900001111',
    address: '南山区**路2号',
  },
  {
    id: 2,
    date: '2024-01-02',
    name: '李四',
    city: '深圳',
    tel: '13900002222',
    address: '南山区**路2号',
  },
  {
    id: 3,
    date: '2024-01-03',
    name: '王五',
    city: '北京',
    tel: '13700001111',
    address: '朝阳区**路3号',
  },
  {
    id: 4,
    date: '2024-01-04',
    name: '赵六',
    city: '上海',
    tel: '13600001111',
    address: '浦东新区**路4号',
  },
]
const spanMethod = ({ row, rowIndex, columnIndex }) => {
  if (columnIndex === 3) {
    if (rowIndex > 0 && data[rowIndex - 1].city === row.city) {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
    let rowspan = 1
    while (rowIndex + rowspan < data.length && data[rowIndex + rowspan].city === row.city) {
      rowspan++
    }
    return {
      rowspan,
      colspan: 1,
    }
  }
}
</script>

满屏表格

通过 cell-class-name、cell-style 等属性可以自定义单元格样式，配合 height 实现满屏效果。

vue tsvue js

vue

<template>
  <div class="flex flex-col h-screen">
    <s-status-bar />
    <div class="flex-1 min-h-0 rounded-t-xl overflow-hidden mx-2">
      <s-table
        :columns="columns"
        :data="data"
        style="height: 100%; white-space: nowrap"
        :header-cell-style="{
          backgroundColor: 'var(--s-color-primary)',
          color: 'var(--s-white)',
        }"
        header-cell-class-name="cell"
        cell-class-name="cell"
        :cell-style="
          ({ rowIndex, columnIndex }) => {
            return {
              backgroundColor: getBgColor(rowIndex, columnIndex),
            }
          }
        "
      ></s-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { columns, data } from './level-data'

const bgColor = [
  ['#e6edfd', '#f7f8fe'],
  ['#f7f8fe', '#fff'],
]

const getBgColor = (row: number, col: number) => {
  return bgColor[row % 2][col % 2]
}
</script>

<style lang="scss" scoped>
:deep(.cell) {
  padding: 6px 8px;
  height: 54px;
  white-space: nowrap;
  text-align: center;
  font-size: var(--s-font-size-sm);
}
</style>

vue

<template>
  <div class="flex flex-col h-screen">
    <s-status-bar />
    <div class="flex-1 min-h-0 rounded-t-xl overflow-hidden mx-2">
      <s-table
        :columns="columns"
        :data="data"
        style="height: 100%; white-space: nowrap"
        :header-cell-style="{
          backgroundColor: 'var(--s-color-primary)',
          color: 'var(--s-white)',
        }"
        header-cell-class-name="cell"
        cell-class-name="cell"
        :cell-style="
          ({ rowIndex, columnIndex }) => {
            return {
              backgroundColor: getBgColor(rowIndex, columnIndex),
            }
          }
        "
      ></s-table>
    </div>
  </div>
</template>

<script setup lang="js">
import { columns, data } from './level-data'
const bgColor = [
  ['#e6edfd', '#f7f8fe'],
  ['#f7f8fe', '#fff'],
]
const getBgColor = (row, col) => {
  return bgColor[row % 2][col % 2]
}
</script>

<style lang="scss" scoped>
:deep(.cell) {
  padding: 6px 8px;
  height: 54px;
  white-space: nowrap;
  text-align: center;
  font-size: var(--s-font-size-sm);
}
</style>

level-data.ts

tsjs

import type { TableColumnProps } from 'sard'

export const columns: TableColumnProps[] = [
  {
    label: '等级',
    prop: 'level',
    fixed: true,
  },
  {
    label: '好友上限',
    prop: 'gghysx',
  },
  {
    label: '等级加速',
    prop: 'vipgrade',
  },
  {
    label: '2000人群',
    prop: 'group2000',
  },
  {
    label: '1000人群',
    prop: 'group1000',
  },
  {
    label: '表情漫游',
    prop: 'face_move',
  },
  {
    label: '云消息服务',
    prop: 'chatmsg',
  },
  {
    label: '离线传文件',
    prop: 'file_off',
  },
] as const

export const data = [
  {
    level: '非会员',
    gghysx: '3000',
    vipgrade: '不加倍',
    group2000: '无',
    group1000: '无',
    face_move: '无',
    chatmsg: '无',
    file_off: '2G',
  },
  {
    level: 'SVIP1',
    gghysx: '3500',
    vipgrade: '1.4倍',
    group2000: '无',
    group1000: '无',
    face_move: '100个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP2',
    gghysx: '3500',
    vipgrade: '1.6倍',
    group2000: '无',
    group1000: '无',
    face_move: '200个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP3',
    gghysx: '3500',
    vipgrade: '1.7倍',
    group2000: '无',
    group1000: '无',
    face_move: '400个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP4',
    gghysx: '3500',
    vipgrade: '1.8倍',
    group2000: '无',
    group1000: '无',
    face_move: '600个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP5',
    gghysx: '3500',
    vipgrade: '1.8倍',
    group2000: '无',
    group1000: '无',
    face_move: '800个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP6',
    gghysx: '3800',
    vipgrade: '1.9倍',
    group2000: '无',
    group1000: '无',
    face_move: '1000个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP7',
    gghysx: '4000',
    vipgrade: '2.1倍',
    group2000: '无',
    group1000: '无',
    face_move: '1200个',
    chatmsg: '所有好友',
    file_off: '2.5T',
  },
  {
    level: 'SVIP8',
    gghysx: '4500',
    vipgrade: '2.2倍',
    group2000: '1',
    group1000: '3',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP9',
    gghysx: '5000',
    vipgrade: '2.5倍',
    group2000: '3',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10',
    gghysx: '5000',
    vipgrade: '3.5倍',
    group2000: '6',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10一星',
    gghysx: '5000',
    vipgrade: '3.7倍',
    group2000: '7',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10二星',
    gghysx: '5000',
    vipgrade: '4.0倍',
    group2000: '7',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10三星',
    gghysx: '5000',
    vipgrade: '4.5倍',
    group2000: '7',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10四星',
    gghysx: '5000',
    vipgrade: '5倍',
    group2000: '7',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10五星',
    gghysx: '5000',
    vipgrade: '5.5倍',
    group2000: '7',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
]

export const columns = [
  {
    label: '等级',
    prop: 'level',
    fixed: true,
  },
  {
    label: '好友上限',
    prop: 'gghysx',
  },
  {
    label: '等级加速',
    prop: 'vipgrade',
  },
  {
    label: '2000人群',
    prop: 'group2000',
  },
  {
    label: '1000人群',
    prop: 'group1000',
  },
  {
    label: '表情漫游',
    prop: 'face_move',
  },
  {
    label: '云消息服务',
    prop: 'chatmsg',
  },
  {
    label: '离线传文件',
    prop: 'file_off',
  },
]
export const data = [
  {
    level: '非会员',
    gghysx: '3000',
    vipgrade: '不加倍',
    group2000: '无',
    group1000: '无',
    face_move: '无',
    chatmsg: '无',
    file_off: '2G',
  },
  {
    level: 'SVIP1',
    gghysx: '3500',
    vipgrade: '1.4倍',
    group2000: '无',
    group1000: '无',
    face_move: '100个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP2',
    gghysx: '3500',
    vipgrade: '1.6倍',
    group2000: '无',
    group1000: '无',
    face_move: '200个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP3',
    gghysx: '3500',
    vipgrade: '1.7倍',
    group2000: '无',
    group1000: '无',
    face_move: '400个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP4',
    gghysx: '3500',
    vipgrade: '1.8倍',
    group2000: '无',
    group1000: '无',
    face_move: '600个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP5',
    gghysx: '3500',
    vipgrade: '1.8倍',
    group2000: '无',
    group1000: '无',
    face_move: '800个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP6',
    gghysx: '3800',
    vipgrade: '1.9倍',
    group2000: '无',
    group1000: '无',
    face_move: '1000个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP7',
    gghysx: '4000',
    vipgrade: '2.1倍',
    group2000: '无',
    group1000: '无',
    face_move: '1200个',
    chatmsg: '所有好友',
    file_off: '2.5T',
  },
  {
    level: 'SVIP8',
    gghysx: '4500',
    vipgrade: '2.2倍',
    group2000: '1',
    group1000: '3',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP9',
    gghysx: '5000',
    vipgrade: '2.5倍',
    group2000: '3',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10',
    gghysx: '5000',
    vipgrade: '3.5倍',
    group2000: '6',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10一星',
    gghysx: '5000',
    vipgrade: '3.7倍',
    group2000: '7',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10二星',
    gghysx: '5000',
    vipgrade: '4.0倍',
    group2000: '7',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10三星',
    gghysx: '5000',
    vipgrade: '4.5倍',
    group2000: '7',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10四星',
    gghysx: '5000',
    vipgrade: '5倍',
    group2000: '7',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10五星',
    gghysx: '5000',
    vipgrade: '5.5倍',
    group2000: '7',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
]

API

TableProps

属性	描述	类型	默认值
columns	列配置	`TableColumnProps[]`	`[]`
data	表格数据	`T[]`	`[]`
height	表格高度，设置后表头固定	`string \| number`	-
maxHeight	表格最大高度	`string \| number`	-
striped	是否显示斑马纹	`boolean`	`false`
bordered	是否显示边框	`boolean`	`false`
underlined	是否显示下边框	`boolean`	`false`
size	表格尺寸	`'small' \| 'medium' \| 'large'`	-
showHeader	是否显示表头	`boolean`	`true`
rowClassName	行类名	`ClassValue \| ((data: { row, rowIndex }) => ClassValue)`	-
rowStyle	行样式	`CSSProperties \| ((data: { row, rowIndex }) => CSSProperties)`	-
cellClassName	单元格类名	`ClassValue \| ((data: { row, column, rowIndex, columnIndex }) => ClassValue)`	-
cellStyle	单元格样式	`CSSProperties \| ((data: { row, column, rowIndex, columnIndex }) => CSSProperties)`	-
headerRowClassName	表头行类名	`ClassValue \| ((data: { row, rowIndex }) => ClassValue)`	-
headerRowStyle	表头行样式	`CSSProperties \| ((data: { row, rowIndex }) => CSSProperties)`	-
headerCellClassName	表头单元格类名	`ClassValue \| ((data: { row, rowIndex, column, columnIndex }) => ClassValue)`	-
headerCellStyle	表头单元格样式	`CSSProperties \| ((data: { row, rowIndex, column, columnIndex }) => CSSProperties)`	-
spanMethod	合并行或列的方法	`(data) => [number, number] \| { rowspan, colspan } \| void`	-

TableSlots

插槽	描述	属性
default	自定义默认内容	-
`[column.slot]`	动态命名插槽，用于自定义列渲染	`{ row, column, rowIndex, columnIndex }`

TableColumnProps

属性	描述	类型	默认值
label	列标题	`string`	-
prop	对应 `data` 中的字段名	`string`	-
width	列宽	`string \| number`	-
minWidth	最小列宽	`string \| number`	-
fixed	固定列，`true` 或 `'start'` 固定在左侧，`'end'` 固定在右侧	`boolean \| 'start' \| 'end'`	`false`
align	对齐方式	`'start' \| 'center' \| 'end'`	`'start'`
headerAlign	表头对齐方式	`'start' \| 'center' \| 'end'`	-
formatter	格式化单元格内容，支持返回 VNode	`(data: { row, column, rowIndex, columnIndex }) => any`	-
slot	指定渲染单元格的插槽名称	`string`	-
columns	嵌套子列，用于多级表头	`TableColumnProps[]`	-
className	列的自定义类名	`string`	-

主题定制

样式变量

CSS 变量	值
`--s-table-border-color`	`var(--s-border-color)`
`--s-table-bg`	`var(--s-bg-color-container)`
`--s-table-bg-striped`	`var(--s-fill-color-tertiary)`
`--s-table-header-bg`	`var(--s-bg-color-container)`
`--s-table-cell-padding-sm`	`4px 6px`
`--s-table-cell-padding`	`4px 8px`
`--s-table-cell-padding-lg`	`6px 12px`
`--s-table-font-size-sm`	`var(--s-font-size-sm)`
`--s-table-font-size`	`var(--s-font-size)`
`--s-table-font-size-lg`	`var(--s-font-size)`

介绍 ​

代码演示 ​

基础使用 ​

隐藏表头 ​

下边框 ​

边框 ​

有条纹的 ​

自定义宽度 ​

固定表头 ​

固定列 ​

固定表头和列 ​

多级表头 ​

合并行或列 ​

满屏表格 ​

API ​

TableProps ​

TableSlots ​

TableColumnProps ​

主题定制 ​

样式变量 ​

介绍

代码演示

基础使用

隐藏表头

下边框

边框

有条纹的

自定义宽度

固定表头

固定列

固定表头和列

多级表头

合并行或列

满屏表格

API

TableProps

TableSlots

TableColumnProps

主题定制

样式变量