Data Viewer 数据查看器

基于 BrConfigProvider 实现全局主题配置，支持多视图切换、筛选、导出的企业级数据查看组件，可无缝集成 BrTable 和 BrCard。

组件特性

🔄 多视图切换：支持表格、卡片、JSON、树形结构的快速切换。
✨ 数据高亮：轻松高亮数据中的重要关键字。
📑 内置分页：集成客户端分页功能，并完美支持搜索过滤联动。
🎨 主题定制：基于 BrConfigProvider 支持全局主题定制。

基础用法与多视图切换

支持表格、卡片、JSON、树形结构的快速切换。

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

const demoData = ref([
  { id: 1, name: 'Alice Smith', email: 'alice@example.com', role: 'Admin', status: 'Active' },
  { id: 2, name: 'Bob Jones', email: 'bob@example.com', role: 'User', status: 'Inactive' },
])

const columns: BrDataViewerColumn[] = [
  { key: 'id', title: 'ID', width: 80 },
  { key: 'name', title: 'Full Name' },
  { key: 'email', title: 'Email Address' },
  { key: 'role', title: 'Role' },
  { key: 'status', title: 'Status' }
]
</script>

<template>
  <BrDataViewer
    :data="demoData"
    :columns="columns"
    height="400px"
  />
</template>

卡片视图与数据高亮

通过 default-view="card" 设置默认视图为卡片，结合 highlight-keywords 实现关键字高亮。

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

const demoData = ref([
  { id: 1, name: 'Alice Smith', email: 'alice@example.com', role: 'Admin', status: 'Active' },
  { id: 2, name: 'Bob Jones', email: 'bob@example.com', role: 'User', status: 'Inactive' },
])

const columns: BrDataViewerColumn[] = [
  { key: 'id', title: 'ID', width: 80 },
  { key: 'name', title: 'Full Name' },
  { key: 'email', title: 'Email Address' },
  { key: 'role', title: 'Role' },
  { key: 'status', title: 'Status' }
]
</script>

<template>
  <BrDataViewer
    :data="demoData"
    :columns="columns"
    default-view="card"
    :allowed-views="['card', 'table']"
    :highlight-keywords="['Active']"
    height="300px"
  />
</template>

主题定制与全局配置

展示如何通过 BrConfigProvider 全局配置组件样式。

<script setup lang="ts">
import { ref } from 'vue'
import { BrConfigProvider, BrDataViewer, BrDataViewerColumn } from '@breezeui/vue'

const demoData = ref([
  { id: 1, name: 'Alice Smith', email: 'alice@example.com', role: 'Admin', status: 'Active' },
  { id: 2, name: 'Bob Jones', email: 'bob@example.com', role: 'User', status: 'Inactive' },
])

const columns: BrDataViewerColumn[] = [
  { key: 'id', title: 'ID', width: 80 },
  { key: 'name', title: 'Full Name' },
  { key: 'email', title: 'Email Address' },
  { key: 'role', title: 'Role' },
  { key: 'status', title: 'Status' }
]

const customTheme = ref({
  primary: '#10b981', // Emerald 500
  radius: 0.5,
})
</script>

<template>
  <BrConfigProvider :theme="customTheme">
    <BrDataViewer
      :data="demoData"
      :columns="columns"
    />
  </BrConfigProvider>
</template>

分页功能

通过设置 :pagination="true" 开启内置的客户端自动分页，或者传入对象实现完全受控的分页。

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

const demoData = ref(Array.from({ length: 25 }).map((_, i) => ({
  id: i + 1,
  name: `User ${i + 1}`,
  email: `user${i + 1}@example.com`,
  role: i % 3 === 0 ? 'Admin' : i % 2 === 0 ? 'Editor' : 'User',
  status: i % 4 === 0 ? 'Inactive' : i % 5 === 0 ? 'Pending' : 'Active'
})))

const columns: BrDataViewerColumn[] = [
  { key: 'id', title: 'ID', width: 80 },
  { key: 'name', title: 'Full Name' },
  { key: 'email', title: 'Email Address' },
  { key: 'role', title: 'Role' },
  { key: 'status', title: 'Status' }
]
</script>

<template>
  <div class="space-y-8">
    <div class="space-y-4">
      <h3 class="text-lg font-medium">Built-in Client Pagination</h3>
      <p class="text-sm text-muted-foreground">Set <code>:pagination="true"</code> to enable automatic client-side pagination.</p>
      <BrDataViewer
        :data="demoData"
        :columns="columns"
        :pagination="true"
        height="400px"
      />
    </div>
  </div>
</template>

API 参考

BrDataViewer

参数	类型	默认值	说明
data	`any[]`	`[]`	绑定的数据源
columns	`BrDataViewerColumn[]`	`[]`	列配置
defaultView	`'table' \| 'json' \| 'tree' \| 'card'`	`'table'`	默认视图类型
allowedViews	`DataViewType[]`	`['table', 'json', 'tree', 'card']`	允许切换的视图列表
loading	`boolean`	`false`	是否处于加载状态
error	`string \| Error \| null`	`null`	错误信息
emptyText	`string`	`'No data'`	空数据提示
height	`string \| number`	`-`	容器高度
pagination	`BrDataViewerPagination \| boolean`	`false`	分页配置。传入 `true` 则使用内置的客户端分页，或传入配置对象以完全受控。
highlightKeywords	`string[]`	`[]`	需要高亮的关键字

BrDataViewerColumn

参数	类型	默认值	说明
key	`string`	`-`	列键值
title	`string`	`-`	列标题
width	`string \| number`	`-`	列宽
render	`(row: any, index: number) => any`	`-`	自定义渲染函数
hidden	`boolean`	`false`	是否隐藏该列

事件

事件名	参数	说明
update:pagination	`(pagination: BrDataViewerPagination)`	分页改变时触发
view-change	`(view: string)`	视图切换时触发

#Data Viewer 数据查看器

#组件特性

#基础用法与多视图切换

#卡片视图与数据高亮

#主题定制与全局配置

#分页功能

#API 参考

#BrDataViewer

#BrDataViewerColumn

#事件