import{_ as i,o as a,c as t,a2 as h}from"./chunks/framework.BbmSSMjL.js";const g=JSON.parse('{"title":"9.9 数据展示组件","description":"","frontmatter":{},"headers":[],"relativePath":"zh/frontend/display-components.md","filePath":"zh/frontend/display-components.md"}'),n={name:"zh/frontend/display-components.md"};function k(l,s,p,e,d,F){return a(),t("div",null,[...s[0]||(s[0]=[h(`

9.9 数据展示组件

概述

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

Table 表格组件

vue

<template>
  <BasicTable
    :columns="columns"
    :request="loadDataTable"
    :row-key="(row) => row.id"
    ref="tableRef"
    :actionColumn="actionColumn"
    @update:checked-row-keys="onCheckedRow"
  />
</template>

<script setup>
import { h, reactive } from 'vue';
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);

// 操作列（render 返回 TableAction，auth 控制按钮权限）
const actionColumn = reactive({
  width: 200,
  title: '操作',
  key: 'action',
  fixed: 'right',
  render(record) {
    return h(TableAction as any, {
      actions: [
        { label: '编辑', type: 'info', onClick: () => handleEdit(record), auth: ['sys:example:update'] },
        { label: '删除', type: 'error', onClick: () => handleDelete(record), auth: ['sys:example:delete'] },
      ],
    });
  },
});

// 多选变化（勾选行 key 集合）
function onCheckedRow(keys) {
  selectedKeys.value = keys;
}
</script>

分页字段约定

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

列定义常用属性

属性	说明	示例
`title`	列标题	`'创建时间'`
`key`	字段名（camelCase，与响应一致）	`'createTime'`
`width` / `minWidth`	固定宽度 / 最小宽度（自适应）	`180`
`fixed`	固定列：`left` / `right`	`'right'`
`type`	列类型：`selection`（多选框）/ `index`（序号）	`'selection'`
`render`	自定义渲染函数，参数为当前行对象	`(record) => h(...)`
`auth`	按权限控制列显示	`['sys:example:update']`

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>

9.9 数据展示组件 ​

Table 表格组件 ​

列定义常用属性 ​

Page 页面容器 ​

Icon 图标选择器 ​

相关文档 ​

9.9 数据展示组件

Table 表格组件

列定义常用属性

Page 页面容器

Icon 图标选择器

相关文档