完善虚拟滚动展开表格示例

Author: huangshuwei

examples/src/docs/en/ve-table/virtual-scroll/main.vue

@@ -8,6 +8,7 @@
         <RowCheckbox />
         <RowRadio />
         <RowExpand />
+        <RowExpandTable />
         <ColumnFixed />
         <FooterSummary />
         <API
@@ -24,6 +25,7 @@ import AutoHeight from "./auto-height.md";
 import RowCheckbox from "./row-checkbox.md";
 import RowRadio from "./row-radio.md";
 import RowExpand from "./row-expand.md";
+import RowExpandTable from "./row-expand-table.md";
 import FooterSummary from "../footer-summary/virtual-scroll.md";
 import ColumnFixed from "./column-fixed.md";
 import RowIndex from "./row-index.md";
@@ -38,6 +40,7 @@ export default {
         RowCheckbox,
         RowRadio,
         RowExpand,
+        RowExpandTable,
         ColumnFixed,
         FooterSummary,
         RowIndex,

examples/src/docs/en/ve-table/virtual-scroll/row-expand-table.md

@@ -0,0 +1,159 @@
+:::anchor Combination Row Expand Table
+
+:::demo
+
+```html
+<template>
+    <div>
+        <ve-table
+            fixed-header
+            :max-height="500"
+            :virtual-scroll-option="virtualScrollOption"
+            :expand-option="expandOption"
+            :columns="columns"
+            :table-data="tableData"
+            row-key-field-name="rowKey"
+        />
+    </div>
+</template>
+
+<script>
+    // 此示例是在组件内部定义了一个子组件。你当然也可以通过 `import`关键字导入一个组件
+    const ChildTableComp = {
+        name: "ChildTableComp",
+        template: `
+        <div class="child-table-comp">
+            <span style="font-weight:bold;">Table Name:{{row.name}}</span>
+            <ve-table
+              :max-height="300"
+              :fixed-header="true"
+              style="width:100%"
+              :columns="columns"
+              :table-data="tableData"
+              :virtual-scroll-option="{
+                  enable: false,
+              }"
+            />
+        </div>
+    `,
+        props: {
+            row: Object,
+        },
+        data() {
+            return {
+                columns: [
+                    { field: "col1", key: "a", title: "Col1" },
+                    { field: "col2", key: "b", title: "Col2" },
+                    { field: "col3", key: "c", title: "Col3" },
+                    { field: "col4", key: "d", title: "Col4" },
+                    { field: "col5", key: "e", title: "Col5" },
+                ],
+                tableData: [
+                    {
+                        col1: "1",
+                        col2: "2",
+                        col3: "3",
+                        col4: "4",
+                        col5: "5",
+                    },
+                    {
+                        col1: "1",
+                        col2: "2",
+                        col3: "3",
+                        col4: "4",
+                        col5: "5",
+                    },
+                    {
+                        col1: "1",
+                        col2: "2",
+                        col3: "3",
+                        col4: "4",
+                        col5: "5",
+                    },
+                    {
+                        col1: "1",
+                        col2: "2",
+                        col3: "3",
+                        col4: "4",
+                        col5: "5",
+                    },
+                ],
+            };
+        },
+    };
+
+    export default {
+        data() {
+            return {
+                virtualScrollOption: {
+                    // 是否开启
+                    enable: true,
+                },
+                expandOption: {
+                    defaultExpandedRowKeys: [2],
+                    render: ({ row, column, rowIndex }, h) => {
+                        return <ChildTableComp row={row} />;
+                    },
+                },
+
+                columns: [
+                    {
+                        field: "",
+                        key: "a",
+                        // type=expand
+                        type: "expand",
+                        title: "",
+                        width: 50,
+                        align: "center",
+                    },
+                    {
+                        field: "name",
+                        key: "b",
+                        title: "Name",
+                        width: 200,
+                        align: "left",
+                        renderBodyCell: ({ row }, h) => {
+                            return <span domPropsInnerHTML={row.name}></span>;
+                        },
+                    },
+                    {
+                        field: "hobby",
+                        key: "c",
+                        title: "Hobby",
+                        width: 300,
+                        align: "left",
+                    },
+                    {
+                        field: "address",
+                        key: "d",
+                        title: "Address",
+                        width: "",
+                        align: "left",
+                    },
+                ],
+                tableData: [],
+            };
+        },
+        methods: {
+            initData() {
+                let data = [];
+                for (let i = 0; i < 10000; i++) {
+                    data.push({
+                        rowKey: i,
+                        name: `name${i}`,
+                        hobby: `hobby${i}`,
+                        address: `address${i}`,
+                    });
+                }
+
+                this.tableData = data;
+            },
+        },
+        created() {
+            this.initData();
+        },
+    };
+</script>
+```
+
+:::

examples/src/docs/en/ve-table/virtual-scroll/row-expand.md

@@ -1,6 +1,6 @@
 :::anchor Combination Row Expand
 
-:::demo Row expand, Need specify `rowKeyFieldName` property
+:::demo
 
 ```html
 <template>

examples/src/docs/zh/ve-table/virtual-scroll/main.vue

@@ -2,14 +2,15 @@
     <div>
         <h2>虚拟滚动</h2>
         <Explain />
-        <!-- <Base />
+        <Base />
         <AutoHeight />
         <RowIndex />
         <RowCheckbox />
-        <RowRadio /> -->
+        <RowRadio />
         <RowExpand />
-        <!-- <ColumnFixed />
-        <FooterSummary /> -->
+        <RowExpandTable />
+        <ColumnFixed />
+        <FooterSummary />
         <API title="API" anchor="API" desc="virtualScrollOption 虚拟滚动配置" />
     </div>
 </template>
@@ -20,6 +21,7 @@ import AutoHeight from "./auto-height.md";
 import RowCheckbox from "./row-checkbox.md";
 import RowRadio from "./row-radio.md";
 import RowExpand from "./row-expand.md";
+import RowExpandTable from "./row-expand-table.md";
 import FooterSummary from "../footer-summary/virtual-scroll.md";
 import ColumnFixed from "./column-fixed.md";
 import RowIndex from "./row-index.md";
@@ -29,14 +31,15 @@ export default {
     name: "basic-main",
     components: {
         Explain,
-        // Base,
-        // AutoHeight,
-        // RowCheckbox,
-        // RowRadio,
+        Base,
+        AutoHeight,
+        RowCheckbox,
+        RowRadio,
         RowExpand,
-        // ColumnFixed,
-        // FooterSummary,
-        // RowIndex,
+        RowExpandTable,
+        ColumnFixed,
+        FooterSummary,
+        RowIndex,
         API,
     },
 };