签入版本

RXThinkCMF_ThinkPhp8_AntdVue/zh/appendix/components.md

@@ -27,7 +27,6 @@
 | Region | `components/Region/` | 行政区划 | `value`、`level` |
 | Cropper | `components/Cropper/` | 头像裁剪 | `image`、`aspectRatio` |
 | NumberInput | `components/numberInput/` | 数字输入 | `value`、`min`、`max` |
-| PriceInput | `components/priceInput/` | 价格输入 | `value`、`precision` |
 
 ## Excel
 
@@ -41,7 +40,6 @@
 | 组件 | 路径 | 说明 |
 |------|------|------|
 | Authority | `components/Authority/` | 权限组件（根据权限显示/隐藏） |
-| CheckToken | `components/CheckToken/` | Token 校验组件 |
 | Lockscreen | `components/Lockscreen/` | 锁屏组件 |
 | Websocket | `components/Websocket/` | WebSocket 组件 |
 
@@ -51,20 +49,34 @@
 
 ```vue
 <template>
-  <BasicTable @register="registerTable" />
+  <BasicTable
+    :columns="columns"
+    :request="loadDataTable"
+    :row-key="(row) => row.id"
+    ref="tableRef"
+  >
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'action'">
+        <a-button type="link" @click="handleEdit(record)">编辑</a-button>
+      </template>
+    </template>
+  </BasicTable>
 </template>
 
 <script setup>
-import { BasicTable, useTable } from '@/components/Table';
+import { ref } from 'vue';
+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 tableRef = ref();
+const columns = [
+  { title: 'ID', dataIndex: 'id', width: 80 },
+  { title: '名称', dataIndex: 'name' },
+  { title: '状态', dataIndex: 'statusText', width: 100 },
+  { title: '操作', dataIndex: 'action', key: 'action', width: 180 },
+];
+
+const loadDataTable = async (params) => await getExamplePage(params);
+const handleEdit = (record) => {};
 </script>
 ```
 
@@ -80,8 +92,13 @@ import { BasicForm, useForm } from '@/components/Form';
 
 const [registerForm] = useForm({
   schemas: [
-    { field: 'name', label: '名称', component: 'Input', required: true },
-    { field: 'status', label: '状态', component: 'Select', componentProps: { options: [...] } },
+    {
+      name: 'name',
+      label: '名称',
+      component: 'Input',
+      rules: [{ required: true, message: '请输入名称', trigger: ['blur'] }],
+    },
+    { name: 'status', label: '状态', component: 'Select', componentProps: { options: [...] } },
   ],
 });
 </script>
@@ -91,15 +108,19 @@ const [registerForm] = useForm({
 
 ```vue
 <template>
-  <BasicModal @register="registerModal" @ok="handleSubmit" />
+  <basicModal @register="registerModal" @ok="handleSubmit">
+    <template #default>
+      <!-- 表单内容 -->
+    </template>
+  </basicModal>
 </template>
 
 <script setup>
-import { BasicModal, useModal } from '@/components/Modal';
+import { basicModal, useModal } from '@/components/Modal';
 
 const [registerModal, { openModal, closeModal }] = useModal();
 
-const handleAdd = () => openModal(true, { isUpdate: false });
+const handleAdd = () => openModal();
 const handleSubmit = async () => { /* ... */ closeModal(); };
 </script>
 ```