补充表格动态高度示例

Author: huangshuwei

examples/src/docs/zh/ve-table/header-fixed/dynamic-height.md

@@ -0,0 +1,49 @@
+:::anchor 动态高度
+
+:::demo 你可以使用 [calc css 函数](<https://developer.mozilla.org/en-US/docs/Web/CSS/calc()>) 实现表格动态高度。如 `max-height="calc(100vh - 10px)"` 或者 `max-height="calc(100% - 10px)"` 等
+
+```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>
+```
+
+:::

examples/src/docs/zh/ve-table/header-fixed/main.vue

@@ -4,13 +4,15 @@
         <Explain />
         <Base />
         <AutoHeight />
+        <DynamicHeight />
         <HeaderFixedDisabled />
     </div>
 </template>
 <script>
 import Explain from "./explain.md";
 import Base from "./base.md";
 import AutoHeight from "./auto-height.md";
+import DynamicHeight from "./dynamic-height.md";
 import HeaderFixedDisabled from "./header-fixed-disabled.md";
 
 export default {
@@ -19,6 +21,7 @@ export default {
         Explain,
         Base,
         AutoHeight,
+        DynamicHeight,
         HeaderFixedDisabled
     }
 };