表格修改

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,31 +37,64 @@ const pagination = reactive<PageController>({
   page: 1,
 });
 
-const columns = [
+// 列接口数据
-  {
+interface RowData{
-    title: 'Name',
+  name:string
-    key: 'name'
+  sex:'female' | 'male' | 'unknown',
-  },
+  address:string
-  {
+}
-    title: 'Age',
+// 类似render - 函数式组件渲染
-    key: 'age'
+function createColumns({
-  },
+  sendMail
-  {
+}: {
-    title: 'Address',
+  sendMail: (rowData: RowData) => void
-    key: 'address'
+}): 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) {
 
   }