add show header doc

Author: huangshuwei

CHANGE-LOG.md

@@ -23,6 +23,7 @@ V2.18.0
 -   添加单元格批量复制功能
 -   添加单元格批量粘贴功能
 -   添加单元格批量剪切功能
+-   添加隐藏表头功能
 
 ### Bug Fixes
 

examples/src/docs/en/ve-table/api/db.js

@@ -104,7 +104,7 @@ export const db = {
         data: [
             {
                 param: "tableData",
-                desc: "table data",
+                desc: "Table data",
                 type: "<code>Array</code>",
                 optionalVal: "-",
                 default: "-",
@@ -123,6 +123,13 @@ export const db = {
                 optionalVal: "-",
                 default: "-",
             },
+            {
+                param: "showHeader",
+                desc: `Show header`,
+                type: `<code>Boolean</code>`,
+                optionalVal: "-",
+                default: "true",
+            },
             {
                 param: "fixedHeader",
                 desc: "Is the header fixed,Enabled by default.It needs to be used in combination with `maxHeight`",
@@ -189,7 +196,7 @@ export const db = {
             },
             {
                 param: "cellStyleOption",
-                desc: "cell style option,Refer to cellStyleOption option for details",
+                desc: "Cell style option,Refer to cellStyleOption option for details",
                 type: "<code>Object</code>",
                 optionalVal: "-",
                 default: "-",
@@ -203,7 +210,7 @@ export const db = {
             },
             {
                 param: "expandOption",
-                desc: "row expand option,Refer to expandOption option for details",
+                desc: "Row expand option,Refer to expandOption option for details",
                 type: "<code>Object</code>",
                 optionalVal: "-",
                 default: "-",

examples/src/docs/en/ve-table/header-hidden/base.md

@@ -0,0 +1,70 @@
+:::anchor Header Hidden
+
+:::demo
+
+```html
+<template>
+    <div>
+        <el-radio-group @change="autofillTypeChang" v-model="showHeaderRadio">
+            <el-radio label="Show">Show</el-radio>
+            <el-radio label="Hidden">Hidden</el-radio>
+        </el-radio-group>
+        <br />
+        <br />
+        <ve-table
+            :show-header="showHeader"
+            :columns="columns"
+            :table-data="tableData"
+            rowKeyFieldName="rowKey"
+        />
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                showHeaderRadio: "Hidden",
+                columns: [
+                    { field: "col1", key: "col1", title: "Col1" },
+                    { field: "col2", key: "col2", title: "Col2" },
+                    { field: "col3", key: "col3", title: "Col3" },
+                    { field: "col4", key: "col4", title: "Col4" },
+                    { field: "col5", key: "col5", title: "Col5" },
+                    { field: "col6", key: "col6", title: "Col6" },
+                ],
+                tableData: [],
+            };
+        },
+        computed: {
+            showHeader() {
+                return this.showHeaderRadio === "Show";
+            },
+        },
+        methods: {
+            initTableData() {
+                let data = [];
+                for (let i = 0; i < 8; i++) {
+                    data.push({
+                        rowKey: i,
+                        col1: `A${i + 1}`,
+                        col2: `B${i + 1}`,
+                        col3: `C${i + 1}`,
+                        col4: `D${i + 1}`,
+                        col5: `E${i + 1}`,
+                        col6: `F${i + 1}`,
+                        col7: `G${i + 1}`,
+                        col8: `H${i + 1}`,
+                    });
+                }
+                this.tableData = data;
+            },
+        },
+        created() {
+            this.initTableData();
+        },
+    };
+</script>
+```
+
+:::

examples/src/docs/en/ve-table/header-hidden/explain.md

@@ -0,0 +1,3 @@
+:::tip
+1、The header is displayed by default. You can use `:fixed-header="false"` to hide the header
+:::

examples/src/docs/en/ve-table/header-hidden/main.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <h2>Header Hidden</h2>
+        <Explain />
+        <Base />
+    </div>
+</template>
+<script>
+import Explain from "./explain.md";
+import Base from "./base.md";
+
+export default {
+    name: "basic-main",
+    components: {
+        Explain,
+        Base,
+    },
+};
+</script>

examples/src/docs/zh/ve-table/api/db.js

@@ -123,6 +123,13 @@ export const db = {
                 optionalVal: "-",
                 default: "-",
             },
+            {
+                param: "showHeader",
+                desc: `是否展示表头`,
+                type: `<code>Boolean</code>`,
+                optionalVal: "-",
+                default: "true",
+            },
             {
                 param: "fixedHeader",
                 desc: "是否固定表头，默认启用。需要和 `maxHeight`结合使用",

examples/src/docs/zh/ve-table/header-hidden/base.md

@@ -0,0 +1,70 @@
+:::anchor 隐藏表头
+
+:::demo
+
+```html
+<template>
+    <div>
+        <el-radio-group @change="autofillTypeChang" v-model="showHeaderRadio">
+            <el-radio label="Show">Show</el-radio>
+            <el-radio label="Hidden">Hidden</el-radio>
+        </el-radio-group>
+        <br />
+        <br />
+        <ve-table
+            :show-header="showHeader"
+            :columns="columns"
+            :table-data="tableData"
+            rowKeyFieldName="rowKey"
+        />
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                showHeaderRadio: "Hidden",
+                columns: [
+                    { field: "col1", key: "col1", title: "Col1" },
+                    { field: "col2", key: "col2", title: "Col2" },
+                    { field: "col3", key: "col3", title: "Col3" },
+                    { field: "col4", key: "col4", title: "Col4" },
+                    { field: "col5", key: "col5", title: "Col5" },
+                    { field: "col6", key: "col6", title: "Col6" },
+                ],
+                tableData: [],
+            };
+        },
+        computed: {
+            showHeader() {
+                return this.showHeaderRadio === "Show";
+            },
+        },
+        methods: {
+            initTableData() {
+                let data = [];
+                for (let i = 0; i < 8; i++) {
+                    data.push({
+                        rowKey: i,
+                        col1: `A${i + 1}`,
+                        col2: `B${i + 1}`,
+                        col3: `C${i + 1}`,
+                        col4: `D${i + 1}`,
+                        col5: `E${i + 1}`,
+                        col6: `F${i + 1}`,
+                        col7: `G${i + 1}`,
+                        col8: `H${i + 1}`,
+                    });
+                }
+                this.tableData = data;
+            },
+        },
+        created() {
+            this.initTableData();
+        },
+    };
+</script>
+```
+
+:::

examples/src/docs/zh/ve-table/header-hidden/explain.md

@@ -0,0 +1,3 @@
+:::tip
+1、表头默认是显示的，你可以用过 `:fixed-header="false"`隐藏表头
+:::

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

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <h2>表头隐藏</h2>
+        <Explain />
+        <Base />
+    </div>
+</template>
+<script>
+import Explain from "./explain.md";
+import Base from "./base.md";
+
+export default {
+    name: "basic-main",
+    components: {
+        Explain,
+        Base,
+    },
+};
+</script>

examples/src/router/locale/en.router.config.js

@@ -140,6 +140,13 @@ const config = [
                 name: "Header Grouping",
                 meta: { keepAlive: true },
             },
+            {
+                path: "header-hidden",
+                component: () =>
+                    import("@/docs/en/ve-table/header-hidden/main.vue"),
+                name: "Header Hidden",
+                meta: { keepAlive: true },
+            },
             {
                 path: "header-filter",
                 component: () =>