签入版本

RXThinkCMF_Laravel13_EleVue/zh/frontend/display-components.md

@@ -8,31 +8,47 @@
 
 ```vue
 <template>
-  <BasicTable @register="registerTable" />
+  <BasicTable
+    :columns="columns"
+    :request="loadDataTable"
+    :row-key="(row) => row.id"
+    ref="tableRef"
+    :actionColumn="actionColumn"
+    @selection-change="onSelectionChange"
+  />
 </template>
 
 <script setup>
-import { BasicTable, useTable } from '@/components/Table';
+import { TableAction } from '@/components/Table';
+import { getExamplePage } from '@/api/tool/example';
+import { columns } from './columns';
 
-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' },
-    ],
-  },
-});
+// 分页请求函数（返回 {records, total, current, size, pages}）
+const loadDataTable = (params) => getExamplePage(params);
+
+const actionColumn = {
+  width: 200,
+  title: '操作',
+  dataIndex: 'action',
+  slots: { customRender: 'action' },
+};
 </script>
 ```
 
+:::tip 分页字段约定
+本项目 `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
@@ -59,33 +75,8 @@ import IconPicker from '@/components/icon/picker.vue';
 </script>
 ```
 
-:::warning 组件未实现
-Description 描述列表组件尚未在项目中实现，以下为规划示例。
-:::
-
-## Description 描述列表
-
-```vue
-<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>
-```
-
 ## 相关文档
 
 - [数据录入组件](/zh/frontend/form-components.html)
 - [Excel 导入导出组件](/zh/frontend/excel-components.html)
-- [前端组件速查](/zh/appendix/components.html)
+- [前端组件速查](/zh/appendix/components.html)