doc refine

Author: huangshuwei

examples/src/docs/en/ve-table/api/column-width-resize-option-props.vue

@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <tpl
+            :desc="desc"
+            :anchor="anchor"
+            :table-data="db.columnWidthResizeOption.data"
+            :columns="db.columnWidthResizeOption.columns"
+        />
+    </div>
+</template>
+<script>
+import tpl from "@/comp/api-tpl";
+import { db } from "./db";
+export default {
+    components: { tpl },
+    props: {
+        anchor: {
+            type: String,
+            default: "Column Resize Option",
+        },
+        desc: {
+            type: String,
+            default: "columnWidthResizeOption",
+        },
+    },
+    data() {
+        return {
+            db: db,
+        };
+    },
+};
+</script>

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

@@ -1194,6 +1194,38 @@ export const db = {
                 desc: `The callback method after cell delete. Parameter Description:\r1、<code>data</code>delete data\r2、<code>selectionRangeIndexes</code>The indexs information of delete area\r3、<code>selectionRangeKeys</code>The keys information of delete paste`,
                 type: `<code>Function({
                     data, selectionRangeIndexes, selectionRangeKeys
+})</code>`,
+                optionalVal: "-",
+                default: "-",
+            },
+        ],
+        columns: columnsType1,
+    },
+    // 列宽改变配置
+    columnWidthResizeOption: {
+        data: [
+            {
+                param: "enable",
+                desc: `enable column resize`,
+                type: `<code>Boolean</code>`,
+                optionalVal: "-",
+                default: "false",
+            },
+            {
+                param: "minWidth",
+                desc: `min width of resize column`,
+                type: `<code>Number</code>`,
+                optionalVal: "-",
+                default: "30px",
+            },
+            {
+                param: "sizeChange",
+                desc: `The callback method after column resize. Parameter Description:\r1、<code>column</code>resize column\r2、<code>differWidth</code>Width of the difference after column resize\r3、<code>columnWidth</code>column width after column resize\r4、<code>tableWidth</code>table width after column resize`,
+                type: `<code>Function({
+                column,
+                differWidth,
+                columnWidth,
+                tableWidth
 })</code>`,
                 optionalVal: "-",
                 default: "-",

examples/src/docs/en/ve-table/api/main.vue

@@ -39,6 +39,8 @@
         <cellAutofillOption />
         <!-- Clipboard Option -->
         <clipboardOption />
+        <!-- Clipboard Option -->
+        <columnWidthResizeOption />
     </div>
 </template>
 <script>
@@ -62,6 +64,7 @@ import contextmenuHeaderOption from "./contextmenu-header-option-props";
 import contextmenuBodyOption from "./contextmenu-body-option-props";
 import cellAutofillOption from "./cell-autofill-option-props";
 import clipboardOption from "./clipboard-option-props";
+import columnWidthResizeOption from "./column-width-resize-option-props";
 export default {
     components: {
         TableProps,
@@ -83,6 +86,7 @@ export default {
         contextmenuBodyOption,
         cellAutofillOption,
         clipboardOption,
+        columnWidthResizeOption,
     },
     data() {
         return {

examples/src/docs/en/ve-table/column-resize/basic.md

@@ -1,6 +1,8 @@
-:::anchor 列宽拖动
+:::anchor Column Drag
 
-:::demo 1、通过 `minWidth`设置列拖动的最小宽度<br>2、通过`sizeChange({ column, differWidth, columnWidth, tableWidth })`列拖动变化的回调信息
+You can hover the mouse between two columns and drag
+
+:::demo 1、Set the min width of resize column through `minWidth`<br>2、Get the callback method of resize column changes through `sizeChange({ column, differWidth, columnWidth, tableWidth })`
 
 ```html
 <template>

examples/src/docs/en/ve-table/column-resize/main.vue

@@ -1,19 +1,22 @@
 <template>
     <div>
-        <h2>列宽拖动</h2>
+        <h2>Column Resize</h2>
         <Explain />
         <Basic />
+        <API title="API" anchor="API" />
     </div>
 </template>
 <script>
 import Explain from "./explain.md";
 import Basic from "./basic.md";
+import API from "../api/column-width-resize-option-props";
 
 export default {
     name: "basic-main",
     components: {
         Explain,
         Basic,
+        API,
     },
 };
 </script>

examples/src/docs/zh/ve-table/api/column-width-resize-option-props.vue

@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <tpl
+            :desc="desc"
+            :anchor="anchor"
+            :table-data="db.columnWidthResizeOption.data"
+            :columns="db.columnWidthResizeOption.columns"
+        />
+    </div>
+</template>
+<script>
+import tpl from "@/comp/api-tpl";
+import { db } from "./db";
+export default {
+    components: { tpl },
+    props: {
+        anchor: {
+            type: String,
+            default: "列宽改变配置",
+        },
+        desc: {
+            type: String,
+            default: "columnWidthResizeOption",
+        },
+    },
+    data() {
+        return {
+            db: db,
+        };
+    },
+};
+</script>

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

@@ -1187,6 +1187,39 @@ export const db = {
                 desc: `单元格删除后回调方法。参数说明：\r1、<code>data</code>删除的数据\r2、<code>selectionRangeIndexes</code>删除区域的索引信息\r3、<code>selectionRangeKeys</code>删除区域的key信息`,
                 type: `<code>Function({
                     data, selectionRangeIndexes, selectionRangeKeys
+})</code>`,
+                optionalVal: "-",
+                default: "-",
+            },
+        ],
+        columns: columnsType1,
+    },
+
+    // 列宽改变配置
+    columnWidthResizeOption: {
+        data: [
+            {
+                param: "enable",
+                desc: `是否开启列宽可变`,
+                type: `<code>Boolean</code>`,
+                optionalVal: "-",
+                default: "false",
+            },
+            {
+                param: "minWidth",
+                desc: `可改变列的最小宽度`,
+                type: `<code>Number</code>`,
+                optionalVal: "-",
+                default: "30px",
+            },
+            {
+                param: "sizeChange",
+                desc: `列宽改变后的回调函数。参数说明：\r1、<code>column</code>宽度改变的列信息\r2、<code>differWidth</code>列宽改变后差异的宽度\r3、<code>columnWidth</code>列宽改变后的宽度\r4、<code>tableWidth</code>列宽改变后的表格宽度`,
+                type: `<code>Function({
+                    column,
+                    differWidth,
+                    columnWidth,
+                    tableWidth
 })</code>`,
                 optionalVal: "-",
                 default: "-",

examples/src/docs/zh/ve-table/api/main.vue

@@ -39,6 +39,8 @@
         <cellAutofillOption />
         <!-- Clipboard Option -->
         <clipboardOption />
+        <!-- Clipboard Option -->
+        <columnWidthResizeOption />
     </div>
 </template>
 <script>
@@ -62,6 +64,7 @@ import contextmenuHeaderOption from "./contextmenu-header-option-props";
 import contextmenuBodyOption from "./contextmenu-body-option-props";
 import cellAutofillOption from "./cell-autofill-option-props";
 import clipboardOption from "./clipboard-option-props";
+import columnWidthResizeOption from "./column-width-resize-option-props";
 export default {
     components: {
         TableProps,
@@ -83,6 +86,7 @@ export default {
         contextmenuBodyOption,
         cellAutofillOption,
         clipboardOption,
+        columnWidthResizeOption,
     },
     data() {
         return {

examples/src/docs/zh/ve-table/column-resize/basic.md

@@ -1,5 +1,7 @@
 :::anchor 列宽拖动
 
+你可以将鼠标悬浮在两列之间，然后拖动即可
+
 :::demo 1、通过 `minWidth`设置列拖动的最小宽度<br>2、通过`sizeChange({ column, differWidth, columnWidth, tableWidth })`列拖动变化的回调信息
 
 ```html

examples/src/docs/zh/ve-table/column-resize/main.vue

@@ -3,17 +3,20 @@
         <h2>列宽拖动</h2>
         <Explain />
         <Basic />
+        <API title="API" anchor="API" />
     </div>
 </template>
 <script>
 import Explain from "./explain.md";
 import Basic from "./basic.md";
+import API from "../api/column-width-resize-option-props";
 
 export default {
     name: "basic-main",
     components: {
         Explain,
         Basic,
+        API,
     },
 };
 </script>