import{_ as i,o as a,c as t,a2 as n}from"./chunks/framework.B-QBKwc1.js";const o=JSON.parse('{"title":"数据展示组件","description":"本节介绍前端项目中常用的数据展示组件，包括表格（BasicTable）、页面容器（PageWrapper）和图标选择器（IconPicker）。","frontmatter":{},"headers":[],"relativePath":"zh/frontend/display-components.md","filePath":"zh/frontend/display-components.md"}'),h={name:"zh/frontend/display-components.md"};function l(k,s,p,e,d,r){return a(),t("div",null,[...s[0]||(s[0]=[n(`

9.9 数据展示组件 ​

概述

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

Table 表格组件 ​

vue
<template>
  <BasicTable
    :columns="columns"
    :request="loadDataTable"
    :row-key="(row) => row.id"
    ref="tableRef"
    :actionColumn="actionColumn"
    @selection-change="onSelectionChange"
  />
</template>

<script setup>
import { TableAction } from '@/components/Table';
import { getExamplePage } from '@/api/tool/example';
import { columns } from './columns';

// 分页请求函数（返回 {records, total, current, size, pages}）
const loadDataTable = (params) => getExamplePage(params);

const actionColumn = {
  width: 200,
  title: '操作',
  dataIndex: 'action',
  slots: { customRender: 'action' },
};
</script>

分页字段约定

本项目 BasicTable 通过 :request 传入分页请求函数（没有 useTable hook），内部绑定后端固定分页结构 data.records / data.total。statusText 等 *Text 字段由后端 serializeMaps 自动补全，直接作为列 field 使用即可。

列定义常用属性 ​

属性说明示例
title列标题'创建时间'
field字段名（camelCase，与响应一致）'createTime'
width列宽180
formatter自定义格式化(v) => v ?? '-'
slots自定义单元格插槽'statusSlot'

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>

相关文档 ​

`,13)])])}const g=i(h,[["render",l]]);export{o as __pageData,g as default};