2.0.0

src/views/comp/table/basicColumns.ts

@@ -1,72 +1,95 @@
 import { h } from 'vue';
 import { NAvatar, NTag } from 'naive-ui';
+import { BasicColumn } from '@/components/Table';
+export interface ListData {
+  id: number;
+  name: string;
+  sex: string;
+  avatar: string;
+  email: string;
+  city: string;
+  status: string;
+  type: string;
+  createDate: string;
+}
 
-export const columns = [
+const sexMap = {
+  male: '男',
+  female: '女',
+  unknown: '未知',
+};
+
+const statusMap = {
+  close: '已取消',
+  refuse: '已拒绝',
+  pass: '已通过',
+};
+
+export const columns: BasicColumn<ListData>[] = [
   {
     title: 'id',
     key: 'id',
-    width: 100,
-  },
-  {
-    title: '编码',
-    key: 'no',
-    width: 100,
   },
   {
     title: '名称',
     key: 'name',
-    width: 100,
   },
   {
     title: '头像',
     key: 'avatar',
-    width: 100,
-    render(row) {
+    render(record) {
       return h(NAvatar, {
-        size: 48,
-        src: row.avatar,
+        size: 50,
+        src: record.avatar,
       });
     },
   },
   {
-    title: '地址',
-    key: 'address',
-    width: 150,
+    title: '性别',
+    key: 'sex',
+    render(record) {
+      return h(
+        NTag,
+        {
+          type: record.sex === 'male' ? 'info' : 'error',
+        },
+        {
+          default: () => sexMap[record.sex],
+        }
+      );
+    },
   },
   {
-    title: '开始日期',
-    key: 'beginTime',
-    width: 160,
+    title: '邮箱',
+    key: 'email',
+    width: 220,
   },
   {
-    title: '结束日期',
-    key: 'endTime',
-    width: 160,
+    title: '城市',
+    key: 'city',
   },
   {
     title: '状态',
     key: 'status',
-    width: 100,
-    render(row) {
+    render(record) {
       return h(
         NTag,
         {
-          type: row.status ? 'success' : 'error',
+          type:
+            record.status === 'close'
+              ? 'default'
+              : record.status === 'refuse'
+              ? 'error'
+              : 'success',
         },
         {
-          default: () => (row.status ? '启用' : '禁用'),
+          default: () => statusMap[record.status],
         }
       );
     },
   },
   {
     title: '创建时间',
-    key: 'date',
-    width: 160,
-  },
-  {
-    title: '停留时间',
-    key: 'time',
-    width: 80,
+    key: 'createDate',
   },
 ];