From 77a6853df0c4e0bc383001aa626737fcc98071d9 Mon Sep 17 00:00:00 2001
From: fangyunong <fangyunogn@ylzinfo.com>
Date: Thu, 10 Jul 2025 22:27:33 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/role/pages/Auth.vue | 69 ++++++++++++++++++++++++++---------
 1 file changed, 52 insertions(+), 17 deletions(-)

diff --git a/src/views/role/pages/Auth.vue b/src/views/role/pages/Auth.vue
index 580ad9c..ebd24aa 100644
--- a/src/views/role/pages/Auth.vue
+++ b/src/views/role/pages/Auth.vue
@@ -27,7 +27,9 @@
 <script setup lang='ts'>
 import { SearchOutline } from '@vicons/ionicons5';
 import { getUserList } from '@/api/roleApi';
+import { DataTableColumns, NButton, useMessage } from 'naive-ui';
 
+const message = useMessage();
 const tableMainRef = ref<HTMLElement | null>(null);
 const roleName = ref('');
 const pagination = reactive<PageController>({
@@ -35,33 +37,66 @@ const pagination = reactive<PageController>({
   page: 1,
 });
 
-const columns = [
-  {
-    title: 'Name',
-    key: 'name'
-  },
-  {
-    title: 'Age',
-    key: 'age'
-  },
-  {
-    title: 'Address',
-    key: 'address'
+// 列接口数据
+interface RowData{
+  name:string
+  sex:'female' | 'male' | 'unknown',
+  address:string
+}
+// 类似render - 函数式组件渲染
+function createColumns({
+  sendMail
+}: {
+  sendMail: (rowData: RowData) => void
+}): DataTableColumns<RowData> {
+  return [
+    {
+      title: '用户名',
+      key: 'name'
+    },
+    {
+      title: '性别',
+      key: 'sex'
+    },
+    {
+      title: 'Address',
+      key: 'address'
+    },
+    {
+      title: 'Action',
+      key: 'actions',
+      render(row) {
+        return h(
+          NButton,
+          {
+            size: 'small',
+            onClick: () => sendMail(row)
+          },
+          { default: () => 'Send Email' }
+        )
+      }
+    }
+  ]
+}
+// 生成表格列
+const columns = createColumns({
+  sendMail(rowData) {
+    message.error(`我点击了${rowData.name}`);
   }
-];
+})
 const height = ref(null);
-const data = Array.from({ length: 46 }).map((_, index) => ({
+const data = Array.from({ length: 10 }).map((_, index) => ({
   key: index,
   name: `Edward King ${index}`,
-  age: 32,
+  sex: 'female',
   address: `London, Park Lane no. ${index}`
 }));
 const init = async () => {
   try {
     const result = await getUserList(pagination);
-    console.log(result,'result');
+    console.log(result, 'result');
   } catch (error) {
-    
+
   }
 }
 onMounted(() => {