✨添加表格组件

mock/controller/table.js

@@ -0,0 +1,65 @@
+const { mock } = require("mockjs");
+const { handleRandomImage } = require("../utils");
+const List = [];
+const count = 50;
+for (let i = 0; i < count; i++) {
+  List.push(
+    mock({
+      uuid: "@uuid",
+      id: "@id",
+      title: "@title(1, 2)",
+      description: "@csentence",
+      "status|1": ["published", "draft", "deleted"],
+      author: "@cname",
+      datetime: "@datetime",
+      pageViews: "@integer(300, 5000)",
+      img: handleRandomImage(228, 228),
+      switch: "@boolean",
+      percent: "@integer(80,99)",
+      "rate|1": [1, 2, 3, 4, 5],
+    })
+  );
+}
+
+module.exports = [
+  {
+    url: "/table/getList",
+    type: "get",
+    response(config) {
+      const { title, current = 1, pageSize = 10 } = config.query;
+      let mockList = List.filter((item) => {
+        return !(title && item.title.indexOf(title) < 0);
+      });
+      const pageList = mockList.filter(
+        (item, index) =>
+          index < pageSize * current && index >= pageSize * (current - 1)
+      );
+      return {
+        code: 200,
+        msg: "success",
+        total: mockList.length,
+        data: pageList,
+      };
+    },
+  },
+  {
+    url: "/table/doEdit",
+    type: "post",
+    response() {
+      return {
+        code: 200,
+        msg: "模拟保存成功",
+      };
+    },
+  },
+  {
+    url: "/table/doDelete",
+    type: "post",
+    response() {
+      return {
+        code: 200,
+        msg: "模拟删除成功",
+      };
+    },
+  },
+];

src/api/table.js

@@ -0,0 +1,25 @@
+import request from "@/utils/request";
+
+export function getList(params) {
+  return request({
+    url: "/table/getList",
+    method: "get",
+    params,
+  });
+}
+
+export function doEdit(data) {
+  return request({
+    url: "/table/doEdit",
+    method: "post",
+    data,
+  });
+}
+
+export function doDelete(data) {
+  return request({
+    url: "/table/doDelete",
+    method: "post",
+    data,
+  });
+}

src/router/index.js

@@ -43,6 +43,27 @@ export const asyncRoutes = [
       },
     ],
   },
+  {
+    path: "/vab",
+    component: Layout,
+    redirect: "/vab/table",
+    alwaysShow: true,
+    meta: {
+      title: "组件",
+      icon: "apps-line",
+    },
+    children: [
+      {
+        path: "table",
+        name: "Table",
+        component: () => import("@/views/vab/table"),
+        meta: {
+          title: "表格",
+          icon: "table-2",
+        },
+      },
+    ],
+  },
   {
     path: "/test",
     component: Layout,

src/views/index/components/VersionInformation.vue

@@ -5,7 +5,7 @@
       dependencies['vue'] +
       ' + ant-design-vue ' +
       dependencies['ant-design-vue'] +
-      ' 开发的admin框架vue-admin-beautiful-antdv，vue3.0的流畅超乎了我们的想象，感谢尤雨溪、唐金州的开源项目对框架带来的灵感和帮助，vue-admin-beautiful-antdv同时支持电脑、平板、手机，希望实现一套代码帮助中小微企业快速实现项目落地，帮助前端小白快速入门vue前端框架搭建技术，迅速在工作中占据主导地位。'
+      ' 开发的admin框架vue-admin-beautiful-antdv，vue3.0的流畅超乎了我们的想象，感谢尤雨溪、唐金州的开源项目我带来的灵感和帮助，vue-admin-beautiful-antdv同时支持电脑、平板、手机，希望实现一套代码即可帮助中小微企业快速实现项目落地，帮助前端小白快速入门vue前端框架搭建技术，迅速在工作中占据主导地位。'
     "
     type="success"
     show-icon

src/views/vab/table/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <a-table
+    :columns="columns"
+    :row-key="(record) => record.uuid"
+    :data-source="data"
+    :pagination="pagination"
+    :loading="loading"
+    @change="handleTableChange"
+  ></a-table>
+</template>
+<script>
+  import { getList } from "@/api/table";
+  const columns = [
+    {
+      title: "title",
+      dataIndex: "title",
+    },
+    {
+      title: "description",
+      dataIndex: "description",
+    },
+    {
+      title: "author",
+      dataIndex: "author",
+    },
+    {
+      title: "datetime",
+      dataIndex: "datetime",
+    },
+  ];
+
+  export default {
+    data() {
+      return {
+        data: [],
+        pagination: {
+          showLessItems: true,
+          showQuickJumper: true,
+          showSizeChanger: true,
+        },
+        query: {},
+        loading: false,
+        columns,
+      };
+    },
+    mounted() {
+      this.fetch();
+    },
+    methods: {
+      handleTableChange(pagination) {
+        const pager = { ...this.pagination };
+        pager.current = pagination.current;
+        this.pagination = pager;
+        this.fetch();
+      },
+      fetch() {
+        this.loading = true;
+        getList({
+          pageSize: this.pagination.pageSize,
+          current: this.pagination.current,
+        }).then(({ data, total }) => {
+          const pagination = { ...this.pagination };
+          pagination.total = total;
+          this.loading = false;
+          this.data = data;
+          this.pagination = pagination;
+        });
+      },
+    },
+  };
+</script>