feat: 普通表格

src/lang/modules/enUS.ts

@@ -2,6 +2,8 @@ export default {
   language: {
     ["login"]: "login",
     ["home"]: "home",
+    ["basic-table"]: "basic table",
+    ["common-table"]: "common table",
     ["common-components"]: "common components",
     ["form-component"]: "form components",
     ["dynamic-form"]: "dynamic form",

src/lang/modules/zhCN.ts

@@ -2,6 +2,8 @@ export default {
   language: {
     ["login"]: "登录",
     ["home"]: "首页",
+    ["basic-table"]: "表格 Table",
+    ["common-table"]: "普通表格",
     ["common-components"]: "常用组件",
     ["form-component"]: "表单组件",
     ["dynamic-form"]: "动态表单",

src/router/route.ts

@@ -65,6 +65,38 @@ export const dynamicRoutes: RouteRecordRaw[] = [
           svgIcon: "home" // 菜单图标
         }
       },
+      {
+        path: "/basic-table",
+        name: "basic-table",
+        redirect: "/basic-table/common-table",
+        meta: {
+          title: "basic-table",
+          link: "",
+          hide: false,
+          keepAlive: true,
+          affix: true,
+          iframe: false,
+          roles: ["admin"],
+          svgIcon: "set"
+        },
+        children: [
+          {
+            path: "/basic-table/common-table",
+            name: "common-table",
+            component: () => import("@/views/basic-table/common-table/common-table.vue"),
+            meta: {
+              title: "common-table",
+              link: "",
+              hide: false,
+              keepAlive: true,
+              affix: false,
+              iframe: false,
+              roles: ["admin"],
+              icon: "icon-menu"
+            }
+          }
+        ]
+      },
       {
         path: "/common-components",
         name: "common-components",

src/views/basic-table/common-table/common-table.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="dc-page">
+    <a-table
+      row-key="key"
+      :columns="columns"
+      :data="data"
+      :row-selection="rowSelection"
+      v-model:selectedKeys="selectedKeys"
+      :pagination="pagination"
+    >
+      <template #optional="{ record }">
+        <a-button>{{ record.name }}</a-button>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+const selectedKeys = ref([]);
+
+const rowSelection = reactive({
+  type: "checkbox",
+  showCheckedAll: true,
+  onlyCurrent: false
+});
+const pagination = { pageSize: 10 };
+
+const columns = [
+  {
+    title: "姓名",
+    dataIndex: "name"
+  },
+  {
+    title: "头像",
+    dataIndex: "avatar"
+  },
+  {
+    title: "手机号",
+    dataIndex: "phone"
+  },
+  {
+    title: "Email",
+    dataIndex: "email"
+  },
+  {
+    title: "居住地址",
+    dataIndex: "address"
+  },
+  {
+    title: "用户状态",
+    dataIndex: "status"
+  },
+  {
+    title: "创建时间",
+    dataIndex: "createTime"
+  },
+  {
+    title: "操作",
+    slotName: "optional"
+  }
+];
+const data = reactive([
+  {
+    key: "1",
+    name: "张三",
+    avatar: "https://example.com/avatar1.jpg",
+    phone: "13812345678",
+    email: "zhangsan@example.com",
+    address: "北京市朝阳区",
+    status: 1,
+    createTime: "2024-05-27 09:00:00"
+  },
+  {
+    key: "2",
+    name: "李四",
+    avatar: "https://example.com/avatar2.jpg",
+    phone: "13987654321",
+    email: "lisi@example.com",
+    address: "上海市浦东新区",
+    status: 0,
+    createTime: "2024-05-26 15:30:00"
+  },
+  {
+    key: "3",
+    name: "王五",
+    avatar: "https://example.com/avatar3.jpg",
+    phone: "13666666666",
+    email: "wangwu@example.com",
+    address: "广州市天河区",
+    status: 1,
+    createTime: "2024-05-25 12:45:00"
+  },
+  {
+    key: "4",
+    name: "赵六",
+    avatar: "https://example.com/avatar4.jpg",
+    phone: "13788888888",
+    email: "zhaoliu@example.com",
+    address: "深圳市福田区",
+    status: 0,
+    createTime: "2024-05-24 11:20:00"
+  },
+  {
+    key: "5",
+    name: "钱七",
+    avatar: "https://example.com/avatar5.jpg",
+    phone: "13599999999",
+    email: "qianqi@example.com",
+    address: "成都市锦江区",
+    status: 1,
+    createTime: "2024-05-23 14:10:00"
+  },
+  {
+    key: "6",
+    name: "孙八",
+    avatar: "https://example.com/avatar6.jpg",
+    phone: "13377777777",
+    email: "sunba@example.com",
+    address: "杭州市西湖区",
+    status: 0,
+    createTime: "2024-05-22 10:05:00"
+  },
+  {
+    key: "7",
+    name: "周九",
+    avatar: "https://example.com/avatar7.jpg",
+    phone: "13266666666",
+    email: "zhoujiu@example.com",
+    address: "南京市鼓楼区",
+    status: 1,
+    createTime: "2024-05-21 08:45:00"
+  },
+  {
+    key: "8",
+    name: "吴十",
+    avatar: "https://example.com/avatar8.jpg",
+    phone: "13155555555",
+    email: "wushi@example.com",
+    address: "重庆市渝中区",
+    status: 0,
+    createTime: "2024-05-20 16:30:00"
+  },
+  {
+    key: "9",
+    name: "郑十一",
+    avatar: "https://example.com/avatar9.jpg",
+    phone: "13044444444",
+    email: "zhengshiyi@example.com",
+    address: "武汉市江汉区",
+    status: 1,
+    createTime: "2024-05-19 09:20:00"
+  },
+  {
+    key: "10",
+    name: "孔十二",
+    avatar: "https://example.com/avatar10.jpg",
+    phone: "13933333333",
+    email: "kongshier@example.com",
+    address: "西安市雁塔区",
+    status: 0,
+    createTime: "2024-05-18 13:55:00"
+  }
+]);
+</script>
+
+<style lang="scss" scoped></style>