签入版本

2026-10-20 21:19:44 +08:00
commit 7e70ed6942
2943 changed files with 498573 additions and 0 deletions
@@ -0,0 +1,91 @@
+# 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)