84 lines
2.2 KiB
Markdown
84 lines
2.2 KiB
Markdown
# 9.9 数据展示组件
|
||
|
||
:::tip 概述
|
||
本节介绍前端项目中常用的数据展示组件，包括表格（BasicTable）、页面容器（PageWrapper）和图标选择器（IconPicker）。
|
||
:::
|
||
|
||
## Table 表格组件
|
||
|
||
```vue
|
||
<template>
|
||
<BasicTable
|
||
:columns="columns"
|
||
:request="loadDataTable"
|
||
:row-key="(row) => row.id"
|
||
ref="tableRef"
|
||
:actionColumn="actionColumn"
|
||
:row-selection="{ onChange: onSelectionChange }"
|
||
/>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { TableAction } from '@/components/Table';
|
||
import { getExamplePage } from '@/api/tool/example';
|
||
import { columns } from './columns';
|
||
|
||
// 分页请求函数（返回 {records, total, current, size, pages}）
|
||
const loadDataTable = (params) => getExamplePage(params);
|
||
|
||
const actionColumn = {
|
||
width: 200,
|
||
title: '操作',
|
||
dataIndex: 'action',
|
||
slots: { customRender: 'action' },
|
||
};
|
||
</script>
|
||
```
|
||
|
||
:::tip 分页字段约定
|
||
本项目 `BasicTable` 通过 `:request` 传入分页请求函数（没有 `useTable` hook），内部绑定后端固定分页结构 `data.records` / `data.total`。`statusText` 等 `*Text` 字段由后端 `serializeMaps` 自动补全，直接作为列 `dataIndex` 使用即可。
|
||
:::
|
||
|
||
### 列定义常用属性
|
||
|
||
| 属性 | 说明 | 示例 |
|
||
|------|------|------|
|
||
| `title` | 列标题 | `'创建时间'` |
|
||
| `dataIndex` | 数据字段名（camelCase，与响应一致） | `'createTime'` |
|
||
| `key` | 列标识（`#bodyCell` 插槽按 `column.key` 匹配） | `'action'` |
|
||
| `width` | 列宽 | `180` |
|
||
| `customRender` | 自定义渲染函数（参数 `{ record }`） | `({ record }) => h(Tag, ...)` |
|
||
| `slots` | 自定义单元格插槽 | `{ customRender: 'statusSlot' }` |
|
||
|
||
## Page 页面容器
|
||
|
||
```vue
|
||
<template>
|
||
<PageWrapper>
|
||
<!-- 页面内容 -->
|
||
</PageWrapper>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { PageWrapper } from '@/components/Page';
|
||
</script>
|
||
```
|
||
|
||
## Icon 图标选择器
|
||
|
||
```vue
|
||
<template>
|
||
<IconPicker v-model="formData.icon" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import IconPicker from '@/components/icon/picker.vue';
|
||
</script>
|
||
```
|
||
|
||
## 相关文档
|
||
|
||
- [数据录入组件](/zh/frontend/form-components.html)
|
||
- [Excel 导入导出组件](/zh/frontend/excel-components.html)
|
||
- [前端组件速查](/zh/appendix/components.html)
|