签入版本

RXThinkCMF_ThinkPhp8_NaiveVue/zh/appendix/components.md

@@ -51,20 +51,25 @@
 
 ```vue
 <template>
-  <BasicTable @register="registerTable" />
+  <BasicTable
+    :columns="columns"
+    :request="loadDataTable"
+    :row-key="(row) => row.id"
+    ref="basicTableRef"
+  />
 </template>
 
 <script setup>
-import { BasicTable, useTable } from '@/components/Table';
+import { BasicTable } 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 },
-  ],
-});
+const columns = [
+  { title: 'ID', key: 'id', width: 80 },
+  { title: '名称', key: 'name' },
+  { title: '状态', key: 'statusText', width: 100 },
+];
+
+const loadDataTable = async (params) => await getExamplePage({ ...params });
 </script>
 ```
 
@@ -80,8 +85,8 @@ import { BasicForm, useForm } from '@/components/Form';
 
 const [registerForm] = useForm({
   schemas: [
-    { field: 'name', label: '名称', component: 'Input', required: true },
-    { field: 'status', label: '状态', component: 'Select', componentProps: { options: [...] } },
+    { field: 'name', label: '名称', component: 'NInput', required: true },
+    { field: 'status', label: '状态', component: 'NSelect', componentProps: { options: [...] } },
   ],
 });
 </script>