113 lines
2.7 KiB
Markdown
113 lines
2.7 KiB
Markdown
# 9.9 数据展示组件
|
||
|
||
:::tip 概述
|
||
本节介绍前端项目中常用的数据展示组件，包括表格（BasicTable）、页面容器（PageWrapper）和图标选择器（IconPicker）。
|
||
:::
|
||
|
||
## Table 表格组件
|
||
|
||
```vue
|
||
<template>
|
||
<BasicTable
|
||
:columns="columns"
|
||
:request="loadDataTable"
|
||
:row-key="(row) => row.id"
|
||
ref="basicTableRef"
|
||
:actionColumn="actionColumn"
|
||
/>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { h } from 'vue';
|
||
import { BasicTable, TableAction } from '@/components/Table';
|
||
import { getExamplePage } from '@/api/tool/example';
|
||
|
||
const columns = [ // 列定义（NaiveUI 用 title/key）
|
||
{ title: 'ID', key: 'id', width: 80 },
|
||
{ title: '名称', key: 'name' },
|
||
{ title: '状态', key: 'statusText', width: 100 },
|
||
{ title: '创建时间', key: 'createTime', width: 180 },
|
||
];
|
||
|
||
const actionColumn = { // 操作列（render 返回 TableAction）
|
||
width: 200,
|
||
title: '操作',
|
||
key: 'action',
|
||
fixed: 'right',
|
||
render(record) {
|
||
return h(TableAction, {
|
||
actions: [
|
||
{ label: '编辑', type: 'warning', onClick: () => handleEdit(record) },
|
||
{ label: '删除', type: 'error', onClick: () => handleDelete(record.id), auth: ['sys:example:delete'] },
|
||
],
|
||
});
|
||
},
|
||
};
|
||
|
||
// 分页数据请求（BasicTable 内置分页）
|
||
const loadDataTable = async (params) => {
|
||
return await getExamplePage({ ...params });
|
||
};
|
||
</script>
|
||
```
|
||
|
||
:::tip 说明
|
||
`BasicTable` 通过 `:columns`、`:request`、`ref` 驱动，`TableAction` 用于渲染操作列；刷新表格调用 `basicTableRef.value.reload()`。
|
||
:::
|
||
|
||
## 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) |