签入版本

RXThinkCMF_Laravel13_NaiveVue/zh/frontend/display-components.md

@@ -14,11 +14,12 @@
     :row-key="(row) => row.id"
     ref="tableRef"
     :actionColumn="actionColumn"
-    @selection-change="onSelectionChange"
+    @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';
@@ -26,17 +27,31 @@ import { columns } from './columns';
 // 分页请求函数（返回 {records, total, current, size, pages}）
 const loadDataTable = (params) => getExamplePage(params);
 
-const actionColumn = {
+// 操作列（render 返回 TableAction，auth 控制按钮权限）
+const actionColumn = reactive({
   width: 200,
   title: '操作',
-  dataIndex: 'action',
-  slots: { customRender: 'action' },
-};
+  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` 自动补全，直接作为列 `field` 使用即可。
+本项目 `BasicTable` 通过 `:request` 传入分页请求函数（没有 `useTable` hook），内部绑定后端固定分页结构 `data.records` / `data.total`。`statusText` 等 `*Text` 字段由后端 `serializeMaps` 自动补全，直接作为列 `key` 使用即可。
 :::
 
 ### 列定义常用属性
@@ -44,10 +59,12 @@ const actionColumn = {
 | 属性 | 说明 | 示例 |
 |------|------|------|
 | `title` | 列标题 | `'创建时间'` |
-| `field` | 字段名（camelCase，与响应一致） | `'createTime'` |
-| `width` | 列宽 | `180` |
-| `formatter` | 自定义格式化 | `(v) => v ?? '-'` |
-| `slots` | 自定义单元格插槽 | `'statusSlot'` |
+| `key` | 字段名（camelCase，与响应一致） | `'createTime'` |
+| `width` / `minWidth` | 固定宽度 / 最小宽度（自适应） | `180` |
+| `fixed` | 固定列：`left` / `right` | `'right'` |
+| `type` | 列类型：`selection`（多选框）/ `index`（序号） | `'selection'` |
+| `render` | 自定义渲染函数，参数为当前行对象 | `(record) => h(...)` |
+| `auth` | 按权限控制列显示 | `['sys:example:update']` |
 
 ## Page 页面容器