From 01379f0c976499d2dbce93684274da98f13ff0e8 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Thu, 8 Aug 2024 16:28:23 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E6=B7=BB=E5=8A=A0demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/system/user/index.vue |  5 +
 apps/web-antd/src/views/system/user/table.tsx | 99 +++++++++++++++++++
 2 files changed, 104 insertions(+)
 create mode 100644 apps/web-antd/src/views/system/user/table.tsx

diff --git a/apps/web-antd/src/views/system/user/index.vue b/apps/web-antd/src/views/system/user/index.vue
index bc915cc9..75ef69e3 100644
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/apps/web-antd/src/views/system/user/index.vue
@@ -16,6 +16,8 @@ import { DictTag } from '#/components/Dict';
 import { useDictStore } from '#/store/dict';
 import { getDict, getDictOptions } from '#/utils/dict';
 
+import TableTest from './table';
+
 onMounted(() => {
   console.log('keepAlive测试 -> 挂载了');
 });
@@ -93,5 +95,8 @@ onMounted(() => {
       <ATag :bordered="false" color="geekblue">geekblue</ATag>
       <ATag :bordered="false" color="purple">purple</ATag>
     </Card>
+    <Card title="table测试">
+      <TableTest />
+    </Card>
   </div>
 </template>
diff --git a/apps/web-antd/src/views/system/user/table.tsx b/apps/web-antd/src/views/system/user/table.tsx
new file mode 100644
index 00000000..ab95c94f
--- /dev/null
+++ b/apps/web-antd/src/views/system/user/table.tsx
@@ -0,0 +1,99 @@
+import type { ColumnsType } from 'ant-design-vue/es/table';
+
+import { defineComponent, ref } from 'vue';
+
+import {
+  Button,
+  message,
+  Modal,
+  Popconfirm,
+  Space,
+  Table,
+} from 'ant-design-vue';
+
+export default defineComponent({
+  name: 'TableTest',
+  setup() {
+    const dataSource = [
+      { age: 20, id: 1, name: '张三' },
+      { age: 21, id: 2, name: '李四' },
+      { age: 22, id: 3, name: '王五' },
+    ];
+
+    const columns: ColumnsType = [
+      {
+        align: 'center',
+        dataIndex: 'id',
+        title: 'id',
+      },
+      {
+        align: 'center',
+        dataIndex: 'name',
+        title: '姓名',
+      },
+      {
+        align: 'center',
+        dataIndex: 'age',
+        title: '年龄',
+      },
+      {
+        align: 'center',
+        key: 'action',
+        title: '操作',
+      },
+    ];
+
+    const open = ref(false);
+
+    return () => (
+      <div>
+        <Table
+          columns={columns}
+          dataSource={dataSource}
+          rowKey={'id'}
+          rowSelection={{ type: 'radio' }}
+          size={'middle'}
+        >
+          {{
+            bodyCell: ({ column }: { column: any }) => {
+              if (column.key === 'action') {
+                return (
+                  <Space>
+                    <Button
+                      onClick={() => {
+                        open.value = true;
+                      }}
+                      size="small"
+                      type="primary"
+                    >
+                      编辑
+                    </Button>
+                    <Popconfirm
+                      onConfirm={() => {
+                        message.success('删除成功');
+                      }}
+                      placement="left"
+                      title={'确认删除该条记录？'}
+                    >
+                      <Button danger size="small" type="primary">
+                        删除
+                      </Button>
+                    </Popconfirm>
+                  </Space>
+                );
+              }
+            },
+          }}
+        </Table>
+        <Modal
+          footer={null}
+          onCancel={() => (open.value = false)}
+          open={open.value}
+          title={'modal'}
+        >
+          <p>弹窗内容</p>
+        </Modal>
+      </div>
+    );
+  },
+});