BreezeUI
  • 简体中文

    • Table 表格

    用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

    组件特性

    • 📋 列配置：通过 title、key、width、fixed、sortable 属性配置列。
    • ✅ 行选择：支持通过复选框列进行单选和多选。
    • ↕️ 排序：支持单列和多列排序。
    • 🎨 自定义渲染：通过作用域插槽支持自定义单元格渲染。
    • 📌 固定列：支持左固定列和右固定列。
    • 🎨 样式：支持行、单元格和列级别的自定义样式。
    • 📄 分页：支持外部分页集成。
    • 🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

    基础用法

    最简单的表格用法。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrTable } from '@breezeui/vue'

const columns = [
  { title: 'ID', key: 'id', width: 80 },
  { title: 'Name', key: 'name', width: 150 },
  { title: 'Age', key: 'age', width: 80 },
  { title: 'Email', key: 'email', width: 200 },
]

const data = ref([
  { id: 1, name: 'Alice', age: 24, email: 'alice@example.com' },
  { id: 2, name: 'Bob', age: 28, email: 'bob@example.com' },
  { id: 3, name: 'Charlie', age: 32, email: 'charlie@example.com' },
  { id: 4, name: 'David', age: 21, email: 'david@example.com' },
])
</script>

<template>
  <BrTable :columns="columns" :data="data" row-key="id" />
</template>

    多选

    添加 row-selection 属性以开启多选功能。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrTable } from '@breezeui/vue'

const columns = [
  { title: 'ID', key: 'id', width: 80 },
  { title: 'Name', key: 'name', width: 150 },
  { title: 'Status', key: 'status', width: 120 },
]

const data = ref([
  { id: 1, name: 'Alice', status: 'Active' },
  { id: 2, name: 'Bob', status: 'Inactive' },
])

const selection = ref([])

const handleSelectionChange = (keys: any[], rows: any[]) => {
  selection.value = keys
}
</script>

<template>
  <div class="space-y-4">
    <div class="text-sm text-muted-foreground">
      Selected Keys: {{ selection }}
    </div>
    <BrTable 
      :columns="columns" 
      :data="data" 
      row-selection 
      row-key="id"
      @update:selection="handleSelectionChange"
    />
  </div>
</template>

    排序

    在列配置中设置 sortable: true 即可开启排序功能。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrTable } from '@breezeui/vue'

const columns = [
  { title: 'ID', key: 'id', width: 80, sortable: true },
  { title: 'Name', key: 'name', width: 150, sortable: true },
  { title: 'Age', key: 'age', width: 80, sortable: true },
  { title: 'Score', key: 'score', width: 100, sortable: true },
]

const data = ref([
  { id: 1, name: 'Alice', age: 24, score: 85 },
  { id: 2, name: 'Bob', age: 28, score: 92 },
  { id: 3, name: 'Charlie', age: 21, score: 78 },
  { id: 4, name: 'David', age: 32, score: 95 },
  { id: 5, name: 'Eve', age: 24, score: 88 },
])

const sortState = ref({ key: '', order: '' })

const handleSort = (sort: any) => {
  sortState.value = sort
}
</script>

<template>
  <div class="space-y-4">
    <div class="text-sm text-muted-foreground">
      Current Sort: {{ sortState.key ? `${sortState.key} (${sortState.order})` : 'None' }}
    </div>
    <BrTable 
      :columns="columns" 
      :data="data" 
      row-key="id"
      @sort="handleSort"
    />
  </div>
</template>

    高阶用法

    包含分页、排序、加载状态、斑马纹、带边框、以及自定义列渲染的综合用例。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrTable, BrButton } from '@breezeui/vue'

const columns = [
  { title: 'ID', key: 'id', width: 80, sortable: true },
  { title: 'Name', key: 'name', width: 150 },
  { title: 'Age', key: 'age', width: 80, sortable: true },
  { title: 'Status', key: 'status', width: 120 },
  { title: 'Action', key: 'action', width: 150 },
]

const data = ref(Array.from({ length: 15 }).map((_, i) => ({
  id: i + 1,
  name: `User ${i + 1}`,
  age: 20 + (i % 15),
  status: i % 2 === 0 ? 'Active' : 'Inactive',
})))

const pagination = ref({
  pageSize: 5,
})

const loading = ref(false)

const handleSort = (sort: any) => {
  console.log('Sort changed:', sort)
}
</script>

<template>
  <div class="space-y-4">
    <BrButton size="sm" variant="outline" @click="loading = !loading">
      Toggle Loading
    </BrButton>

    <BrTable 
      :columns="columns" 
      :data="data" 
      :pagination="pagination"
      :loading="loading"
      stripe
      border
      row-key="id"
      @sort="handleSort"
    >
      <template #cell-status="{ row }">
        <span 
          class="px-2 py-1 rounded-full text-xs font-medium"
          :class="row.status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'"
        >
          {{ row.status }}
        </span>
      </template>
      
      <template #cell-action="{ row }">
        <div class="flex space-x-2">
          <BrButton size="xs" variant="outline">Edit</BrButton>
          <BrButton size="xs" variant="destructive">Delete</BrButton>
        </div>
      </template>
    </BrTable>
  </div>
</template>

    API

    Table Props

    属性名说明类型默认值
    data显示的数据any[][]
    columns表格列的配置描述BrTableColumn[][]
    rowKey表格行 key 的取值，可以是字符串或一个函数string | ((row: any) => string | number)'id'
    stripe是否为斑马纹 tablebooleanfalse
    border是否带有纵向边框booleanfalse
    hover是否开启 hover 高亮booleantrue
    loading是否显示加载状态booleanfalse
    loadingText加载状态的文本提示string'Loading...'
    emptyText空数据时的文本提示string'No Data'
    rowSelection是否显示多选列booleanfalse
    maxHeighttable 的最大高度string | number-
    stickyHeader是否固定表头booleanfalse
    pagination分页配置，设为 false 隐藏BrTablePagination | falsefalse

    Table Events

    事件名说明回调参数
    update:selection多选状态发生变化时触发(selectedRowKeys: (string|number)[], selectedRows: any[])
    update:pagination分页状态发生变化时触发(pagination: BrTablePagination)
    sort排序发生变化时触发(sort: BrTableSort)
    row-click当某一行被点击时触发(row: any, index: number, event: MouseEvent)

    Table Slots

    插槽名说明参数
    cell-[key]自定义列的内容渲染{ row, column, index }

    Column 配置 (BrTableColumn)

    属性名说明类型默认值
    key列的唯一标识string-
    title列标题string-
    width对应列的宽度string | number-
    minWidth对应列的最小宽度string | number-
    maxWidth对应列的最大宽度string | number-
    align对齐方式'left' | 'center' | 'right''left'
    fixed列是否固定在左侧或者右侧'left' | 'right' | boolean-
    sortable对应列是否可以排序，custom 为自定义排序boolean | 'custom'false
    render自定义渲染函数(row: any, index: number) => any-