add loading example

Author: huangshuwei

examples/src/docs/en/ve-table/loading/basic.md

@@ -0,0 +1,84 @@
+:::anchor Usage
+
+More about Loading, Please refer to [Loading component](#/en/doc/base/loading)
+
+:::demo
+
+```html
+<template>
+  <div>
+    <button class="button-demo" @click="show()">Open</button>
+    <button class="button-demo" @click="close()">Close</button><br /><br />
+    <ve-table id="loading-container" :columns="columns" :table-data="tableData" />
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        loadingInstance: null,
+        columns: [
+          { field: "name", key: "a", title: "Name", align: "center" },
+          { field: "date", key: "b", title: "Date", align: "left" },
+          { field: "hobby", key: "c", title: "Hobby", align: "right" },
+          { field: "address", key: "d", title: "Address" },
+        ],
+        tableData: [
+          {
+            name: "John",
+            date: "1900-05-20",
+            hobby: "coding and coding repeat",
+            address: "No.1 Century Avenue, Shanghai",
+          },
+          {
+            name: "Dickerson",
+            date: "1910-06-20",
+            hobby: "coding and coding repeat",
+            address: "No.1 Century Avenue, Beijing",
+          },
+          {
+            name: "Larsen",
+            date: "2000-07-20",
+            hobby: "coding and coding repeat",
+            address: "No.1 Century Avenue, Chongqing",
+          },
+          {
+            name: "Geneva",
+            date: "2010-08-20",
+            hobby: "coding and coding repeat",
+            address: "No.1 Century Avenue, Xiamen",
+          },
+          {
+            name: "Jami",
+            date: "2020-09-20",
+            hobby: "coding and coding repeat",
+            address: "No.1 Century Avenue, Shenzhen",
+          },
+        ],
+      };
+    },
+    methods: {
+      show() {
+        this.loadingInstance.show();
+      },
+      close() {
+        this.loadingInstance.close();
+      },
+    },
+    mounted() {
+      this.loadingInstance = this.$veLoading({
+        target: document.querySelector("#loading-container"),
+        // 等同于
+        // target:"#loading-container"
+        name: "wave",
+      });
+      this.show();
+    },
+    destroyed() {
+      this.loadingInstance.destroy();
+    },
+  };
+</script>
+```
+
+:::

examples/src/docs/en/ve-table/loading/explain.md

@@ -0,0 +1,4 @@
+:::tip
+It's very simple for the table component to start loading. You can start loading when you request data<br>
+
+:::

examples/src/docs/en/ve-table/loading/main.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <h2>Enable Loading</h2>
+        <Explain />
+        <basic />
+    </div>
+</template>
+<script>
+import Explain from "./explain.md";
+import Basic from "./basic.md";
+
+export default {
+    name: "basic-main",
+    components: {
+        Explain,
+        Basic
+    }
+};
+</script>

examples/src/docs/zh/ve-table/loading/basic.md

@@ -0,0 +1,84 @@
+:::anchor 示例
+
+更多 Loading 使用方法，请参考 [Loading 组件](#/zh/doc/base/loading)
+
+:::demo
+
+```html
+<template>
+  <div>
+    <button class="button-demo" @click="show()">开启 Loading</button>
+    <button class="button-demo" @click="close()">关闭 Loading</button><br /><br />
+    <ve-table id="loading-container" :columns="columns" :table-data="tableData" />
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        loadingInstance: null,
+        columns: [
+          { field: "name", key: "a", title: "Name", align: "center" },
+          { field: "date", key: "b", title: "Date", align: "left" },
+          { field: "hobby", key: "c", title: "Hobby", align: "right" },
+          { field: "address", key: "d", title: "Address" },
+        ],
+        tableData: [
+          {
+            name: "John",
+            date: "1900-05-20",
+            hobby: "coding and coding repeat",
+            address: "No.1 Century Avenue, Shanghai",
+          },
+          {
+            name: "Dickerson",
+            date: "1910-06-20",
+            hobby: "coding and coding repeat",
+            address: "No.1 Century Avenue, Beijing",
+          },
+          {
+            name: "Larsen",
+            date: "2000-07-20",
+            hobby: "coding and coding repeat",
+            address: "No.1 Century Avenue, Chongqing",
+          },
+          {
+            name: "Geneva",
+            date: "2010-08-20",
+            hobby: "coding and coding repeat",
+            address: "No.1 Century Avenue, Xiamen",
+          },
+          {
+            name: "Jami",
+            date: "2020-09-20",
+            hobby: "coding and coding repeat",
+            address: "No.1 Century Avenue, Shenzhen",
+          },
+        ],
+      };
+    },
+    methods: {
+      show() {
+        this.loadingInstance.show();
+      },
+      close() {
+        this.loadingInstance.close();
+      },
+    },
+    mounted() {
+      this.loadingInstance = this.$veLoading({
+        target: document.querySelector("#loading-container"),
+        // 等同于
+        // target:"#loading-container"
+        name: "wave",
+      });
+      this.show();
+    },
+    destroyed() {
+      this.loadingInstance.destroy();
+    },
+  };
+</script>
+```
+
+:::

examples/src/docs/zh/ve-table/loading/explain.md

@@ -0,0 +1,4 @@
+:::tip
+1、Table 组件开启 Loading 效果是非常简单的，请求数据时开启 Loading 即可<br>
+
+:::

examples/src/docs/zh/ve-table/loading/main.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <h2>结合 Loading 组件</h2>
+        <Explain />
+        <basic />
+    </div>
+</template>
+<script>
+import Explain from "./explain.md";
+import Basic from "./basic.md";
+
+export default {
+    name: "basic-main",
+    components: {
+        Explain,
+        Basic
+    }
+};
+</script>

examples/src/router/locale/en.router.config.js

@@ -232,6 +232,12 @@ const config = [
                 name: "Pagination",
                 meta: { keepAlive: true }
             },
+            {
+                path: "loading",
+                component: () => import("@/docs/en/ve-table/loading/main.vue"),
+                name: "Enable Loading",
+                meta: { keepAlive: true }
+            },
             {
                 path: "virtual-scroll",
                 component: () =>
@@ -253,8 +259,8 @@ const config = [
                 meta: { keepAlive: true }
             }
         ]
-    },
-   /*  {
+    }
+    /*  {
         path: "other",
         name: "辅助组件",
         component: emptyLayout,

examples/src/router/locale/zh.router.config.js

@@ -224,6 +224,12 @@ const config = [
                 name: "分页",
                 meta: { keepAlive: true }
             },
+            {
+                path: "loading",
+                component: () => import("@/docs/zh/ve-table/loading/main.vue"),
+                name: "开启 loading",
+                meta: { keepAlive: true }
+            },
             {
                 path: "virtual-scroll",
                 component: () =>
@@ -245,7 +251,7 @@ const config = [
                 meta: { keepAlive: true }
             }
         ]
-    },
+    }
     /* {
         path: "other",
         name: "辅助组件",