add example

Author: huangshuwei

CHANGE-LOG.md

@@ -37,8 +37,8 @@ V2.12.0
     -   支持 `Ctrl + Enter`键停止编辑状态，并停留在当前单元格
     -   支持 `Alt + Enter`键单元格内文本换行
     -   支持 `Delete`键清空活动单元格内容
-    -   支持 `BackSpace`键清空活动单元格内容，并进去编辑状态
-    -   支持 `Space`键清空活动单元格内容填入空格，并进入编辑状态
+    -   支持 `BackSpace`键清空活动单元格内容，并进入编辑状态
+    -   支持 `Space`键清空活动单元格内容填入空格
     -   支持 `Enter`键停止编辑状态并键向下移动活动单元格
     -   支持 `Tab`键停止编辑状态并向右移动活动单元格
     -   支持 `Shift + Tab`键停止编辑状态并向左移动活动单元格

examples/src/docs/zh/ve-table/cell-edit/single-click-edit.md renamed to examples/src/docs/zh/ve-table/cell-edit/base.md

@@ -1,18 +1,18 @@
-:::anchor 单击编辑
+:::anchor 基本用法
 
-:::demo 通过 `doubleClickEdit=false`关闭双击编辑，开启单击编辑单元格
+:::demo 单元格停止编辑后将触发`cellValueChange`方法，参数`row`为更新后的行数据信息，参数`column`为当前编辑的列信息
 
 ```html
 <template>
     <div>
         <ve-table
-            ref="tableRef"
             rowKeyFieldName="rowKey"
-            :max-height="300"
             :fixed-header="true"
             :columns="columns"
             :table-data="tableData"
             :editOption="editOption"
+            :rowStyleOption="rowStyleOption"
+            border-y
         />
     </div>
 </template>
@@ -21,19 +21,16 @@
     export default {
         data() {
             return {
+                rowStyleOption: {
+                    clickHighlight: false,
+                },
                 // edit option 可控单元格编辑
                 editOption: {
-                    // disable double click edit
-                    doubleClickEdit: false,
                     // cell value change
                     cellValueChange: ({ row, column }) => {
                         console.log("cellValueChange row::", row);
                         console.log("cellValueChange column::", column);
                     },
-                    // row value change
-                    rowValueChange: ({ row }) => {
-                        console.log("rowValueChange row::", row);
-                    },
                 },
                 columns: [
                     {
@@ -53,10 +50,10 @@
                         edit: true,
                     },
                     {
-                        field: "hobby",
-                        key: "hobby",
-                        title: "Hobby",
-                        align: "center",
+                        field: "number",
+                        key: "number",
+                        title: "Number",
+                        align: "right",
                         width: "30%",
                         edit: true,
                     },
@@ -74,35 +71,35 @@
                     {
                         name: "John",
                         date: "1900-05-20",
-                        hobby: "coding and coding repeat",
+                        number: "32",
                         address: "No.1 Century Avenue, Shanghai",
                         rowKey: 0,
                     },
                     {
                         name: "Dickerson",
                         date: "1910-06-20",
-                        hobby: "coding and coding repeat",
+                        number: "676",
                         address: "No.1 Century Avenue, Beijing",
                         rowKey: 1,
                     },
                     {
                         name: "Larsen",
                         date: "2000-07-20",
-                        hobby: "coding and coding repeat",
+                        number: "76",
                         address: "No.1 Century Avenue, Chongqing",
                         rowKey: 2,
                     },
                     {
                         name: "Geneva",
                         date: "2010-08-20",
-                        hobby: "coding and coding repeat",
+                        number: "7797",
                         address: "No.1 Century Avenue, Xiamen",
                         rowKey: 3,
                     },
                     {
                         name: "Jami",
                         date: "2020-09-20",
-                        hobby: "coding and coding repeat",
+                        number: "8978",
                         address: "No.1 Century Avenue, Shenzhen",
                         rowKey: 4,
                     },

examples/src/docs/zh/ve-table/cell-edit/double-click-edit.md renamed to examples/src/docs/zh/ve-table/cell-edit/combine-column-fixed.md

@@ -1,8 +1,6 @@
-:::anchor 双击编辑
+:::anchor 结合固定列
 
-你可以通过 `Enter`键配合上、下、左、右键，无需使用鼠标实现编辑操作
-
-:::demo 1、默认双击开启编辑单元格<br>2、单元格停止编辑后将触发`cellValueChange`方法，参数`row`为更新后的行数据信息，参数`column`为当前编辑的列信息
+:::demo
 
 ```html
 <template>
@@ -130,9 +128,9 @@
                 for (let i = 0; i < 100; i++) {
                     data.push({
                         rowKey: i,
-                        col1: i + "aaaaaa",
-                        col2: "",
-                        col3: 111,
+                        col1: i,
+                        col2: i,
+                        col3: i,
                         col4: i,
                         col5: i,
                         col6: i,

examples/src/docs/zh/ve-table/cell-edit/custom-full-row-edit-control.md

@@ -1,6 +1,6 @@
 :::anchor 可控编辑
 
-:::demo 1、通过实例方法`startEditingCell({ rowKey, colKey, defaultValue })`开启编辑的单元格<br>2、通过实例方法`stopEditingCell({ rowKey, colKey })`停止编辑的单元格
+:::demo 1、通过实例方法`startEditingCell({ rowKey, colKey, defaultValue })`编辑指定的单元格
 
 ```html
 <template>

examples/src/docs/zh/ve-table/cell-edit/edit-control.md

@@ -1,5 +1,4 @@
 :::tip
 1、通过 `editOption`属性配置单元格编辑功能<br>
 2、通过 `columns` 对象设置`edit=true`允许编辑的列<br>
-3、你可以像使用 excel 那样使用快捷键以及编辑
 :::