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