2.6 KiB
2.6 KiB
9.9 数据展示组件
:::tip 概述 本节介绍前端项目中常用的数据展示组件，包括表格（BasicTable）、页面容器（PageWrapper）和图标选择器（IconPicker）。 :::
Table 表格组件
<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 页面容器
<template>
<PageWrapper>
<!-- 页面内容 -->
</PageWrapper>
</template>
<script setup>
import { PageWrapper } from '@/components/Page';
</script>
Icon 图标选择器
<template>
<IconPicker v-model="formData.icon" />
</template>
<script setup>
import IconPicker from '@/components/icon/picker.vue';
</script>
:::warning 组件未实现 Description 描述列表组件尚未在项目中实现，以下为规划示例。 :::
Description 描述列表
<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>