91 lines
2.0 KiB
Markdown
91 lines
2.0 KiB
Markdown
# 9.9 数据展示组件
|
|
|
|
:::tip 概述
|
|
本节介绍前端项目中常用的数据展示组件，包括表格（BasicTable）、页面容器（PageWrapper）和图标选择器（IconPicker）。
|
|
:::
|
|
|
|
## Table 表格组件
|
|
|
|
```vue
|
|
<template>
|
|
<BasicTable @register="registerTable" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { BasicTable, useTable } from '@/components/Table';
|
|
|
|
const [registerTable] = useTable({
|
|
api: getExamplePage, // 数据接口
|
|
columns: [ // 列定义
|
|
{ title: 'ID', field: 'id', width: 80 },
|
|
{ title: '名称', field: 'name' },
|
|
{ title: '状态', field: 'statusText', width: 100 },
|
|
{ title: '创建时间', field: 'createTime', width: 180 },
|
|
],
|
|
actionColumn: { // 操作列
|
|
width: 200,
|
|
actions: [
|
|
{ label: '编辑', onClick: handleEdit },
|
|
{ label: '删除', onClick: handleDelete, type: 'danger' },
|
|
],
|
|
},
|
|
});
|
|
</script>
|
|
```
|
|
|
|
## 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>
|
|
```
|
|
|
|
:::warning 组件未实现
|
|
Description 描述列表组件尚未在项目中实现，以下为规划示例。
|
|
:::
|
|
|
|
## Description 描述列表
|
|
|
|
```vue
|
|
<template>
|
|
<Description :data="detailData" :schema="schema" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Description } from '@/components/Description';
|
|
|
|
const schema = [
|
|
{ field: 'username', label: '用户名' },
|
|
{ field: 'realname', label: '姓名' },
|
|
{ field: 'statusText', label: '状态' },
|
|
{ field: 'createTime', label: '创建时间' },
|
|
];
|
|
|
|
const detailData = ref({});
|
|
</script>
|
|
```
|
|
|
|
## 相关文档
|
|
|
|
- [数据录入组件](/zh/frontend/form-components.html)
|
|
- [Excel 导入导出组件](/zh/frontend/excel-components.html)
|
|
- [前端组件速查](/zh/appendix/components.html) |