签入版本

RXThinkCMF_ThinkPhp6_NaiveVue/zh/frontend/display-components.md

@@ -8,31 +8,53 @@
 
 ```vue
 <template>
-  <BasicTable @register="registerTable" />
+  <BasicTable
+    :columns="columns"
+    :request="loadDataTable"
+    :row-key="(row) => row.id"
+    ref="basicTableRef"
+    :actionColumn="actionColumn"
+  />
 </template>
 
 <script setup>
-import { BasicTable, useTable } from '@/components/Table';
+import { h } from 'vue';
+import { BasicTable, TableAction } from '@/components/Table';
+import { getExamplePage } from '@/api/tool/example';
 
-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' },
-    ],
+const columns = [                     // 列定义（NaiveUI 用 title/key）
+  { title: 'ID', key: 'id', width: 80 },
+  { title: '名称', key: 'name' },
+  { title: '状态', key: 'statusText', width: 100 },
+  { title: '创建时间', key: 'createTime', width: 180 },
+];
+
+const actionColumn = {                // 操作列（render 返回 TableAction）
+  width: 200,
+  title: '操作',
+  key: 'action',
+  fixed: 'right',
+  render(record) {
+    return h(TableAction, {
+      actions: [
+        { label: '编辑', type: 'warning', onClick: () => handleEdit(record) },
+        { label: '删除', type: 'error', onClick: () => handleDelete(record.id), auth: ['sys:example:delete'] },
+      ],
+    });
   },
-});
+};
+
+// 分页数据请求（BasicTable 内置分页）
+const loadDataTable = async (params) => {
+  return await getExamplePage({ ...params });
+};
 </script>
 ```
 
+:::tip 说明
+`BasicTable` 通过 `:columns`、`:request`、`ref` 驱动，`TableAction` 用于渲染操作列；刷新表格调用 `basicTableRef.value.reload()`。
+:::
+
 ## Page 页面容器
 
 ```vue