refine doc

Author: huangshuwei

examples/src/comp/locale/index.js

@@ -40,30 +40,36 @@ export default {
             openInCodeSandBox: "在 CodeSandBox 中编辑",
         },
         completeDemo: {
-            dataRowsOption: [
-                {
-                    value: 5000,
-                    label: "5000 行",
-                },
-                {
-                    value: 10000,
-                    label: "10,000 行",
-                },
-                {
-                    value: 100000,
-                    label: "100,000 行",
-                },
-                {
-                    value: 150000,
-                    label: "150,000 行",
-                },
-            ],
-            dataRows: "数据量：",
-            columnFixed: "列固定：",
-            loading: "Loading：",
-            expand: "行展开：",
-            radio: "行单选：",
-            checkbox: "行多选：",
+            demo1: {
+                selection: "这是数据表格的应用场景",
+                dataRowsOption: [
+                    {
+                        value: 5000,
+                        label: "5000 行",
+                    },
+                    {
+                        value: 10000,
+                        label: "10,000 行",
+                    },
+                    {
+                        value: 100000,
+                        label: "100,000 行",
+                    },
+                    {
+                        value: 150000,
+                        label: "150,000 行",
+                    },
+                ],
+                dataRows: "数据量：",
+                columnFixed: "列固定：",
+                loading: "Loading：",
+                expand: "行展开：",
+                radio: "行单选：",
+                checkbox: "行多选：",
+            },
+            demo2: {
+                selection: "当然，你也可以把它当做 Excel 来用",
+            },
         },
     },
     en: {
@@ -103,30 +109,37 @@ export default {
             openInCodeSandBox: "Edit in CodeSandBox",
         },
         completeDemo: {
-            dataRowsOption: [
-                {
-                    value: 5000,
-                    label: "5000 Rows",
-                },
-                {
-                    value: 10000,
-                    label: "10,000 Rows",
-                },
-                {
-                    value: 100000,
-                    label: "100,000 Rows",
-                },
-                {
-                    value: 150000,
-                    label: "150,000 Rows",
-                },
-            ],
-            dataRows: "Data Rows:",
-            columnFixed: "Fixed Columns:",
-            loading: "Loading:",
-            expand: "Row Expand:",
-            radio: "Row Radio:",
-            checkbox: "Row Checkbox:",
+            demo1: {
+                selection: "Here is a data grid .",
+                dataRowsOption: [
+                    {
+                        value: 5000,
+                        label: "5000 Rows",
+                    },
+                    {
+                        value: 10000,
+                        label: "10,000 Rows",
+                    },
+                    {
+                        value: 100000,
+                        label: "100,000 Rows",
+                    },
+                    {
+                        value: 150000,
+                        label: "150,000 Rows",
+                    },
+                ],
+                dataRows: "Data Rows:",
+                columnFixed: "Fixed Columns:",
+                loading: "Loading:",
+                expand: "Row Expand:",
+                radio: "Row Radio:",
+                checkbox: "Row Checkbox:",
+            },
+            demo2: {
+                selection:
+                    "Of course, you can use it like Excel or Google Sheets .",
+            },
         },
     },
 };

examples/src/demo/index.vue

@@ -3,13 +3,13 @@
         <div class="site-demo-container">
             <div class="demo-title">
                 <div class="demo-title-text">
-                    This is a simple data table display.
+                    {{ currentLocal.demo1.selection }}
                 </div>
             </div>
             <NormalDataGrid />
             <div class="demo-title last">
                 <div class="demo-title-text">
-                    Of course, you can also use it like Excel or Google Sheets .
+                    {{ currentLocal.demo2.selection }}
                 </div>
             </div>
             <Spreadsheet />
@@ -18,6 +18,8 @@
 </template>
 
 <script>
+import locale from "../comp/locale";
+import I18nMixins from "../comp/mixins/i18n-mixins";
 import NormalDataGrid from "./normal-data-grid.vue";
 import Spreadsheet from "./spreadsheet.vue";
 export default {
@@ -26,9 +28,16 @@ export default {
         NormalDataGrid,
         Spreadsheet,
     },
+    mixins: [I18nMixins],
     data() {
         return {};
     },
+    computed: {
+        // current local
+        currentLocal() {
+            return locale[this.currentDocLang]["completeDemo"];
+        },
+    },
 };
 </script>
 <style lang="less">

examples/src/demo/normal-data-grid.vue

@@ -188,7 +188,7 @@ export default {
     computed: {
         // current local
         currentLocal() {
-            return locale[this.currentDocLang]["completeDemo"];
+            return locale[this.currentDocLang]["completeDemo"]["demo1"];
         },
 
         // tableScrollWidth