签入版本

RXThinkCMF_ThinkPhp8_AntdVue/zh/frontend/display-components.md

@@ -8,28 +8,46 @@
 
 ```vue
 <template>
-  <BasicTable @register="registerTable" />
+  <BasicTable
+    :columns="columns"
+    :request="loadDataTable"
+    :row-key="(row) => row.id"
+    ref="tableRef"
+    scroll-x="1200"
+  >
+    <template #tableTitle>
+      <a-button type="primary" @click="handleAdd">新增</a-button>
+    </template>
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'action'">
+        <a-space>
+          <a-button type="link" @click="handleEdit(record)">编辑</a-button>
+          <a-button type="link" danger @click="handleDelete(record.id)">删除</a-button>
+        </a-space>
+      </template>
+    </template>
+  </BasicTable>
 </template>
 
 <script setup>
-import { BasicTable, useTable } from '@/components/Table';
+import { ref } from 'vue';
+import { getExamplePage, exampleDelete } 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 tableRef = ref();
+const columns = [
+  { title: 'ID', dataIndex: 'id', width: 80 },
+  { title: '名称', dataIndex: 'name' },
+  { title: '状态', dataIndex: 'statusText', width: 100 },
+  { title: '创建时间', dataIndex: 'createTime', width: 180 },
+  { title: '操作', dataIndex: 'action', key: 'action', width: 200, fixed: 'right' },
+];
+
+// BasicTable 数据加载：返回值直接交给表格渲染
+const loadDataTable = async (params) => await getExamplePage(params);
+
+const handleAdd = () => {};
+const handleEdit = (record) => {};
+const handleDelete = async (id) => {};
 </script>
 ```