add doc

Author: huangshuwei

examples/src/docs/zh/ve-table/contextmenu/base.md

@@ -1,5 +1,7 @@
 :::anchor 基础用法
 
+右键表格区域查看效果
+
 :::demo
 
 ```html
@@ -136,18 +138,6 @@
         methods: {},
     };
 </script>
-<style>
-    #contextmenu-container {
-        display: flex;
-        width: 300px;
-        height: 300px;
-        justify-content: center;
-        align-items: center;
-        background: #eee;
-        border: 3px dashed #666;
-        border-radius: 8px;
-    }
-</style>
 ```
 
 :::

examples/src/docs/zh/ve-table/contextmenu/contextmenu-types.md

@@ -0,0 +1,11 @@
+:::anchor 右键菜单功能分类
+
+这些右键菜单功能你可以随意选择和组合
+
+| 功能         | 类型               |
+| :----------- | :----------------- |
+| 分割线       | `SEPARATOR`        |
+| 在上方插入行 | `INSERT_ROW_ABOVE` |
+| 在下方插入行 | `INSERT_ROW_BELOW` |
+| 移除该行     | `REMOVE_ROW`       |
+| 隐藏该行     | `HIDE_COLUMN`      |

examples/src/docs/zh/ve-table/contextmenu/custom.md

@@ -25,6 +25,23 @@
                 contextmenuBodyOption: {
                     // callback for all options
                     callback: ({ type, selection }) => {
+                        const { rowKey, colKey } = selection;
+
+                        const rowIndex = this.tableData.findIndex((x) => x.rowKey === rowKey);
+
+                        // custom empty row
+                        if (type === "custom-empty-row") {
+                            this.tableData = this.tableData.map((rowData) => {
+                                // empty current row
+                                if (rowData.rowKey === rowKey) {
+                                    this.columns.forEach((column) => {
+                                        rowData[column.field] = "";
+                                    });
+                                }
+                                return rowData;
+                            });
+                        }
+
                         console.log("type::", type);
                         console.log("selection::", selection);
                     },
@@ -41,10 +58,8 @@
                             type: "SEPARATOR",
                         },
                         {
-                            type: "REMOVE_ROW",
-                        },
-                        {
-                            type: "SEPARATOR",
+                            type: "custom-empty-row",
+                            label: "empty row(custom)",
                         },
                         {
                             type: "customType1",
@@ -167,18 +182,6 @@
         methods: {},
     };
 </script>
-<style>
-    #contextmenu-container {
-        display: flex;
-        width: 300px;
-        height: 300px;
-        justify-content: center;
-        align-items: center;
-        background: #eee;
-        border: 3px dashed #666;
-        border-radius: 8px;
-    }
-</style>
 ```
 
 :::

examples/src/docs/zh/ve-table/contextmenu/disbled.md

@@ -1,3 +1,4 @@
 :::tip
-1、待完善
+1、有些操作可以通过右键菜单更方便的完成。比如单元格编辑功能，可以通过右键操作很方便的插入行或者移除行<br>
+2、当然你也可以自定义右键菜单功能
 :::

examples/src/docs/zh/ve-table/contextmenu/explain.md

@@ -2,19 +2,22 @@
     <div>
         <h2>右键菜单</h2>
         <Explain />
+        <ContextmenuTypes />
         <Base />
         <Custom />
     </div>
 </template>
 <script>
 import Explain from "./explain.md";
+import ContextmenuTypes from "./contextmenu-types.md";
 import Base from "./base.md";
 import Custom from "./custom.md";
 
 export default {
     name: "basic-main",
     components: {
         Explain,
+        ContextmenuTypes,
         Base,
         Custom,
     },