2.7 KiB
2.7 KiB
9.9 数据展示组件
:::tip 概述 本节介绍前端项目中常用的数据展示组件，包括表格（BasicTable）、页面容器（PageWrapper）和图标选择器（IconPicker）。 :::
Table 表格组件
<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 页面容器
<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>