refine table width example

Author: huangshuwei

examples/src/docs/en/ve-table/table-width/auto-width.md

@@ -0,0 +1,58 @@
+:::anchor Auto Width
+
+:::demo If the table width is not set, it is equivalent to `style="width:100%;"`
+
+```html
+<template>
+    <ve-table :columns="columns" :table-data="tableData" />
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                columns: [
+                    { field: "name", key: "a", title: "Name", width: 100 },
+                    { field: "date", key: "b", title: "Tel", width: 200 },
+                    { field: "hobby", key: "c", title: "Hobby", width: 300 },
+                    { field: "address", key: "d", title: "Address", width: 300 },
+                ],
+                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",
+                    },
+                ],
+            };
+        },
+    };
+</script>
+```
+
+:::

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

@@ -2,13 +2,15 @@
     <div>
         <h2>Table Width</h2>
         <Explain />
+        <AutoWidth />
         <FixedWidth />
         <CalcWidth />
         <PercentWidth />
     </div>
 </template>
 <script>
 import Explain from "./explain.md";
+import AutoWidth from "./auto-width.md";
 import FixedWidth from "./fixed-width.md";
 import CalcWidth from "./calc-width.md";
 import PercentWidth from "./percent-width.md";
@@ -17,6 +19,7 @@ export default {
     name: "basic-main",
     components: {
         Explain,
+        AutoWidth,
         FixedWidth,
         CalcWidth,
         PercentWidth,

examples/src/docs/en/ve-table/table-width/percent-width.md

@@ -1,4 +1,4 @@
-:::anchor 表格动态宽度（百分比）
+:::anchor Dynamic Table Width(percentage)
 
 :::demo 1、You can use percentage values to achieve a fixed width of the table. like `style="width:80%"`<br>2、Try changing the browser width to see the effect