Data Viewer 数据查看器
基于 BrConfigProvider 实现全局主题配置，支持多视图切换、筛选、导出的企业级数据查看组件，可无缝集成 BrTable 和 BrCard。
组件特性
- 🔄 多视图切换：支持表格、卡片、JSON、树形结构的快速切换。
- ✨ 数据高亮：轻松高亮数据中的重要关键字。
- 📑 内置分页：集成客户端分页功能，并完美支持搜索过滤联动。
- 🎨 主题定制：基于
BrConfigProvider支持全局主题定制。
基础用法与多视图切换
支持表格、卡片、JSON、树形结构的快速切换。
ID | Full Name | Email Address | Role | Status |
|---|---|---|---|---|
| 1 | Alice Smith | alice@example.com | Admin | Active |
| 2 | Bob Jones | bob@example.com | User | Inactive |
Example
卡片视图与数据高亮
通过 default-view="card" 设置默认视图为卡片，结合 highlight-keywords 实现关键字高亮。
Item 1
ID1
Full NameAlice Smith
Email Addressalice@example.com
RoleAdmin
StatusActive
Item 2
ID2
Full NameBob Jones
Email Addressbob@example.com
RoleUser
StatusInactive
Example
主题定制与全局配置
展示如何通过 BrConfigProvider 全局配置组件样式。
ID | Full Name | Email Address | Role | Status |
|---|---|---|---|---|
| 1 | Alice Smith | alice@example.com | Admin | Active |
| 2 | Bob Jones | bob@example.com | User | Inactive |
Example
分页功能
通过设置 :pagination="true" 开启内置的客户端自动分页，或者传入对象实现完全受控的分页。
Built-in Client Pagination
Set :pagination="true" to enable automatic client-side pagination.
ID | Full Name | Email Address | Role | Status |
|---|---|---|---|---|
| 1 | User 1 | user1@example.com | Admin | Inactive |
| 2 | User 2 | user2@example.com | User | Active |
| 3 | User 3 | user3@example.com | Editor | Active |
| 4 | User 4 | user4@example.com | Admin | Active |
| 5 | User 5 | user5@example.com | Editor | Inactive |
| 6 | User 6 | user6@example.com | User | Pending |
| 7 | User 7 | user7@example.com | Admin | Active |
| 8 | User 8 | user8@example.com | User | Active |
| 9 | User 9 | user9@example.com | Editor | Inactive |
| 10 | User 10 | user10@example.com | Admin | Active |
Example
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) | 视图切换时触发 |