add data empty example

Author: huangshuwei

examples/src/docs/en/ve-table/data-empty/basic.md

@@ -0,0 +1,44 @@
+:::anchor Data Empty
+
+:::demo
+
+```html
+<template>
+  <div>
+    <ve-table :columns="columns" :table-data="tableData" border-y />
+    <div v-show="tableData.length === 0" class="empty-data">Data Empty.</div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        columns: [
+          { field: "name", key: "a", title: "Name", align: "center" },
+          { field: "date", key: "b", title: "Date", align: "left" },
+          { field: "hobby", key: "c", title: "Hobby", align: "center" },
+          { field: "address", key: "d", title: "Address", align: "left" },
+        ],
+        tableData: [],
+      };
+    },
+  };
+</script>
+
+<style>
+  .empty-data {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+    width: 100%;
+    color: #666;
+    font-size: 16px;
+    border: 1px solid #eee;
+    border-top: 0;
+  }
+</style>
+```
+
+:::

examples/src/docs/en/ve-table/data-empty/explain.md

@@ -0,0 +1,4 @@
+:::tip
+1、The component itself does not provide API with data empty effect. You can do it yourself. It's more flexible.
+2、Here is an example
+:::

examples/src/docs/en/ve-table/data-empty/main.vue

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

examples/src/docs/zh/ve-table/data-empty/basic.md

@@ -0,0 +1,44 @@
+:::anchor 空数据
+
+:::demo
+
+```html
+<template>
+  <div>
+    <ve-table :columns="columns" :table-data="tableData" border-y />
+    <div v-show="tableData.length === 0" class="empty-data">暂无数据</div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        columns: [
+          { field: "name", key: "a", title: "Name", align: "center" },
+          { field: "date", key: "b", title: "Date", align: "left" },
+          { field: "hobby", key: "c", title: "Hobby", align: "center" },
+          { field: "address", key: "d", title: "Address", align: "left" },
+        ],
+        tableData: [],
+      };
+    },
+  };
+</script>
+
+<style>
+  .empty-data {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+    width: 100%;
+    color: #666;
+    font-size: 16px;
+    border: 1px solid #eee;
+    border-top: 0;
+  }
+</style>
+```
+
+:::

examples/src/docs/zh/ve-table/data-empty/explain.md

@@ -0,0 +1,3 @@
+:::tip
+1、空数据效果，组件本身没有提供接口，你可以自己实现，这样会更灵活一些
+:::

examples/src/docs/zh/ve-table/data-empty/main.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <h2>空数据</h2>
+        <Explain />
+        <Basic />
+    </div>
+</template>
+<script>
+import Explain from "./explain.md";
+import Basic from "./basic.md";
+
+export default {
+    name: "data-empty",
+    components: {
+        Explain,
+        Basic
+    }
+};
+</script>

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

@@ -252,6 +252,13 @@ const config = [
                 name: "Event Custom",
                 meta: { keepAlive: true }
             },
+            {
+                path: "data-empty",
+                component: () =>
+                    import("@/docs/en/ve-table/data-empty/main.vue"),
+                name: "Data Empty",
+                meta: { keepAlive: true }
+            },
             {
                 path: "api",
                 component: () => import("@/docs/en/ve-table/api/main.vue"),

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

@@ -244,6 +244,13 @@ const config = [
                 name: "事件自定义",
                 meta: { keepAlive: true }
             },
+            {
+                path: "data-empty",
+                component: () =>
+                    import("@/docs/zh/ve-table/data-empty/main.vue"),
+                name: "空数据",
+                meta: { keepAlive: true }
+            },
             {
                 path: "api",
                 component: () => import("@/docs/zh/ve-table/api/main.vue"),