109 lines
2.6 KiB
Markdown
109 lines
2.6 KiB
Markdown
# 9.9 数据展示组件
|
|
|
|
:::tip 概述
|
|
本节介绍前端项目中常用的数据展示组件，包括表格（BasicTable）、页面容器（PageWrapper）和图标选择器（IconPicker）。
|
|
:::
|
|
|
|
## Table 表格组件
|
|
|
|
```vue
|
|
<template>
|
|
<BasicTable
|
|
:columns="columns"
|
|
:request="loadDataTable"
|
|
:row-key="(row) => row.id"
|
|
ref="tableRef"
|
|
scroll-x="1200"
|
|
>
|
|
<template #tableTitle>
|
|
<a-button type="primary" @click="handleAdd">新增</a-button>
|
|
</template>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'action'">
|
|
<a-space>
|
|
<a-button type="link" @click="handleEdit(record)">编辑</a-button>
|
|
<a-button type="link" danger @click="handleDelete(record.id)">删除</a-button>
|
|
</a-space>
|
|
</template>
|
|
</template>
|
|
</BasicTable>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { getExamplePage, exampleDelete } from '@/api/tool/example';
|
|
|
|
const tableRef = ref();
|
|
const columns = [
|
|
{ title: 'ID', dataIndex: 'id', width: 80 },
|
|
{ title: '名称', dataIndex: 'name' },
|
|
{ title: '状态', dataIndex: 'statusText', width: 100 },
|
|
{ title: '创建时间', dataIndex: 'createTime', width: 180 },
|
|
{ title: '操作', dataIndex: 'action', key: 'action', width: 200, fixed: 'right' },
|
|
];
|
|
|
|
// BasicTable 数据加载：返回值直接交给表格渲染
|
|
const loadDataTable = async (params) => await getExamplePage(params);
|
|
|
|
const handleAdd = () => {};
|
|
const handleEdit = (record) => {};
|
|
const handleDelete = async (id) => {};
|
|
</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) |