表格高度示例文档

huangshuwei · huangshuwei · commit baed53740e9e · 2021-08-12T17:28:50.000+08:00
diff --git a/examples/src/docs/en/ve-table/table-height/auto-height.md b/examples/src/docs/en/ve-table/table-height/auto-height.md
@@ -0,0 +1,44 @@
+:::anchor Auto Table Height
+
+:::demo When the table height is not set, the table height is auto height
+
+```html
+<template>
+    <ve-table :columns="columns" :table-data="tableData" />
+</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: [],
+            };
+        },
+        methods: {
+            initTableData() {
+                let data = [];
+                for (let i = 0; i < 2; i++) {
+                    data.push({
+                        name: i,
+                        date: i,
+                        hobby: i,
+                        address: i,
+                    });
+                }
+                this.tableData = data;
+            },
+        },
+        created() {
+            this.initTableData();
+        },
+    };
+</script>
+```
+
+:::
diff --git a/examples/src/docs/en/ve-table/table-height/calc-height.md b/examples/src/docs/en/ve-table/table-height/calc-height.md
@@ -0,0 +1,59 @@
+:::anchor Dynamic Table Height(calc css function)
+
+:::demo 1、You can use [calc css function](<https://developer.mozilla.org/en-US/docs/Web/CSS/calc()>) to achieve table dynamic height<br>2、Try changing the browser height to see the effect
+
+```html
+<template>
+    <ve-table
+        max-height="calc(100vh - 350px)"
+        fixed-header
+        :columns="columns"
+        :table-data="tableData"
+    />
+</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: [],
+            };
+        },
+        methods: {
+            initTableData() {
+                let data = [];
+                for (let i = 0; i < 20; i++) {
+                    data.push({
+                        name: i,
+                        date: i,
+                        hobby: i,
+                        address: i,
+                    });
+                }
+                this.tableData = data;
+            },
+        },
+        created() {
+            this.initTableData();
+        },
+    };
+</script>
+```
+
+:::
diff --git a/examples/src/docs/en/ve-table/table-height/explain.md b/examples/src/docs/en/ve-table/table-height/explain.md
@@ -0,0 +1,6 @@
+:::tip
+1、The table height is determined by row data by default. You can also set the max height through the `max-height` attribute<br>
+2、Table height can be set to a fixed value. like:`:max-height="500"`<br>
+3、Table height can be set to a dynamic value. like:`max-height="calc(100vh - 210px)"` or `max-height="80%"`<br>
+
+:::
diff --git a/examples/src/docs/en/ve-table/table-height/fixed-height.md b/examples/src/docs/en/ve-table/table-height/fixed-height.md
@@ -0,0 +1,51 @@
+:::anchor Fixed Table Height
+
+:::demo
+
+```html
+<template>
+    <ve-table
+        :max-height="300"
+        :columns="columns"
+        :table-data="tableData"
+        :border-around="true"
+        :border-x="true"
+        :border-y="true"
+    />
+</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: [],
+            };
+        },
+        methods: {
+            initTableData() {
+                let data = [];
+                for (let i = 0; i < 20; i++) {
+                    data.push({
+                        name: i,
+                        date: i,
+                        hobby: i,
+                        address: i,
+                    });
+                }
+                this.tableData = data;
+            },
+        },
+        created() {
+            this.initTableData();
+        },
+    };
+</script>
+```
+
+:::
diff --git a/examples/src/docs/en/ve-table/table-height/main.vue b/examples/src/docs/en/ve-table/table-height/main.vue
@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <h2>Table Height</h2>
+        <Explain />
+        <AutoHeight />
+        <FixedHeight />
+        <CalcHeight />
+    </div>
+</template>
+<script>
+import Explain from "./explain.md";
+import AutoHeight from "./auto-height.md";
+import FixedHeight from "./fixed-height.md";
+import CalcHeight from "./calc-height.md";
+
+export default {
+    name: "basic-main",
+    components: {
+        Explain,
+        AutoHeight,
+        FixedHeight,
+        CalcHeight,
+    },
+};
+</script>
diff --git a/examples/src/docs/en/ve-table/table-width/auto-width.md b/examples/src/docs/en/ve-table/table-width/auto-width.md
@@ -1,4 +1,4 @@
-:::anchor Auto Width
+:::anchor Auto Table Width
 
 :::demo If the table width is not set, it is equivalent to `style="width:100%;"`
 
diff --git a/examples/src/docs/zh/ve-table/table-height/auto-height.md b/examples/src/docs/zh/ve-table/table-height/auto-height.md
@@ -0,0 +1,44 @@
+:::anchor 表格高度自适应
+
+:::demo 当不设置表格高度时，表格高度根据内容撑开
+
+```html
+<template>
+    <ve-table :columns="columns" :table-data="tableData" />
+</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: [],
+            };
+        },
+        methods: {
+            initTableData() {
+                let data = [];
+                for (let i = 0; i < 2; i++) {
+                    data.push({
+                        name: i,
+                        date: i,
+                        hobby: i,
+                        address: i,
+                    });
+                }
+                this.tableData = data;
+            },
+        },
+        created() {
+            this.initTableData();
+        },
+    };
+</script>
+```
+
+:::
diff --git a/examples/src/docs/zh/ve-table/table-height/calc-height.md b/examples/src/docs/zh/ve-table/table-height/calc-height.md
@@ -0,0 +1,59 @@
+:::anchor 表格动态高度（calc css 函数）
+
+:::demo 1、你可以使用 [calc css 函数](<https://developer.mozilla.org/en-US/docs/Web/CSS/calc()>) 实现表格动态高度<br>2、试试改变浏览器宽度查看效果
+
+```html
+<template>
+    <ve-table
+        max-height="calc(100vh - 350px)"
+        fixed-header
+        :columns="columns"
+        :table-data="tableData"
+    />
+</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: [],
+            };
+        },
+        methods: {
+            initTableData() {
+                let data = [];
+                for (let i = 0; i < 20; i++) {
+                    data.push({
+                        name: i,
+                        date: i,
+                        hobby: i,
+                        address: i,
+                    });
+                }
+                this.tableData = data;
+            },
+        },
+        created() {
+            this.initTableData();
+        },
+    };
+</script>
+```
+
+:::
diff --git a/examples/src/docs/zh/ve-table/table-height/explain.md b/examples/src/docs/zh/ve-table/table-height/explain.md
@@ -1,5 +1,6 @@
 :::tip
-1、表格高度可以设置固定值。如：`:max-height="500"`<br>
-2、表格高度可以设置动态值。如：`max-height="calc(100vh - 210px)"` 或者 `max-height="80%"`<br>
+1、表格高度默认由行数据决定，也可以通过 `max-height`属性设置最大高度<br>
+2、表格高度可以设置固定值。如：`:max-height="500"`<br>
+3、表格高度可以设置动态值。如：`max-height="calc(100vh - 210px)"` 或者 `max-height="80%"`<br>
 
 :::
diff --git a/examples/src/docs/zh/ve-table/table-height/fixed-height.md b/examples/src/docs/zh/ve-table/table-height/fixed-height.md
@@ -5,7 +5,7 @@
 ```html
 <template>
     <ve-table
-        style="width:900px;height:1000px;"
+        :max-height="300"
         :columns="columns"
         :table-data="tableData"
         :border-around="true"
@@ -19,45 +19,31 @@
         data() {
             return {
                 columns: [
-                    { field: "name", key: "a", title: "Name 100px", width: 100 },
-                    { field: "date", key: "b", title: "Tel 200px", width: 200 },
-                    { field: "hobby", key: "c", title: "Hobby 300px", width: 300 },
-                    { field: "address", key: "d", title: "Address 300px", 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",
-                    },
+                    { 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: [],
             };
         },
+        methods: {
+            initTableData() {
+                let data = [];
+                for (let i = 0; i < 20; i++) {
+                    data.push({
+                        name: i,
+                        date: i,
+                        hobby: i,
+                        address: i,
+                    });
+                }
+                this.tableData = data;
+            },
+        },
+        created() {
+            this.initTableData();
+        },
     };
 </script>
 ```
diff --git a/examples/src/docs/zh/ve-table/table-height/main.vue b/examples/src/docs/zh/ve-table/table-height/main.vue
diff --git a/examples/src/docs/zh/ve-table/table-width/auto-width.md b/examples/src/docs/zh/ve-table/table-width/auto-width.md
diff --git a/examples/src/docs/zh/ve-table/table-width/main.vue b/examples/src/docs/zh/ve-table/table-width/main.vue
diff --git a/examples/src/router/locale/en.router.config.js b/examples/src/router/locale/en.router.config.js
diff --git a/examples/src/router/locale/zh.router.config.js b/examples/src/router/locale/zh.router.config.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-:::anchor Auto Width`
	`1`	`+:::anchor Auto Table Width`
`2`	`2`
`3`	`3`	:::demo If the table width is not set, it is equivalent to `style="width:100%;"`
`4`	`4`