9.9 数据展示组件

概述

本节介绍前端项目中常用的数据展示组件，包括表格（BasicTable）、页面容器（PageWrapper）和图标选择器（IconPicker）。

Table 表格组件

<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 页面容器

<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>

组件未实现

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>

相关文档

• 数据录入组件
• Excel 导入导出组件
• 前端组件速查