doc refine

Author: huangshuwei

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

@@ -1220,12 +1220,11 @@ export const db = {
             },
             {
                 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`,
+                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`,
                 type: `<code>Function({
                 column,
                 differWidth,
                 columnWidth,
-                tableWidth
 })</code>`,
                 optionalVal: "-",
                 default: "-",

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

@@ -1,8 +1,8 @@
 :::anchor Column Drag
 
-You can hover the mouse between two columns and drag
+You can hover the mouse between two columns and drag.If the column width is not set, the default is 50px
 
-:::demo 1、Set the min width of resize column through `columnMinWidth`<br>2、Get the callback method of resize column changes through `sizeChange({ column, differWidth, columnWidth, tableWidth })`
+:::demo 1、Set the min width of resize column through `columnMinWidth`<br>2、Get the callback method of resize column changes through `sizeChange({ column, differWidth, columnWidth })`
 
 ```html
 <template>
@@ -11,7 +11,6 @@ You can hover the mouse between two columns and drag
             <div>column:{{columnResizeInfo.column}}</div>
             <div>differWidth:{{columnResizeInfo.differWidth}}</div>
             <div>columnWidth:{{columnResizeInfo.columnWidth}}</div>
-            <div>tableWidth:{{columnResizeInfo.tableWidth}}</div>
         </div>
         <ve-table
             style="width:100%"
@@ -27,20 +26,20 @@ You can hover the mouse between two columns and drag
 </template>
 
 <script>
+    import Mock from "mockjs";
     export default {
         data() {
             return {
                 columnWidthResizeOption: {
                     // default false
                     enable: true,
                     // column resize min width
-                    columnMinWidth: 30,
+                    minWidth: 30,
                     // column size change
-                    sizeChange: ({ column, differWidth, columnWidth, tableWidth }) => {
+                    sizeChange: ({ column, differWidth, columnWidth }) => {
                         this.columnResizeInfo.column = column;
                         this.columnResizeInfo.differWidth = differWidth;
                         this.columnResizeInfo.columnWidth = columnWidth;
-                        this.columnResizeInfo.tableWidth = tableWidth;
                     },
                 },
                 columns: [
@@ -55,12 +54,14 @@ You can hover the mouse between two columns and drag
                             return ++rowIndex;
                         },
                     },
-                    { 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" },
+                    { field: "col1", key: "col1", title: "Col1", width: 220 },
+                    { field: "col2", key: "col2", title: "Col2", width: 220 },
+                    { field: "col3", key: "col3", title: "Col3", width: 220 },
+                    { field: "col4", key: "col4", title: "Col4", width: 220 },
+                    { field: "col5", key: "col5", title: "Col5", width: 220 },
+                    { field: "col6", key: "col6", title: "Col6", width: 220 },
+                    { field: "col7", key: "col7", title: "Col7" },
+                    { field: "col8", key: "col8", title: "Col8" },
                 ],
                 columnResizeInfo: {
                     column: "",
@@ -74,11 +75,11 @@ You can hover the mouse between two columns and drag
         methods: {
             initTableData() {
                 let data = [];
-                for (let i = 0; i < 8; i++) {
+                for (let i = 0; i < 5; i++) {
                     data.push({
                         rowKey: i,
                         col1: `A${i + 1}`,
-                        col2: `B${i + 1}`,
+                        col2: Mock.Random.sentence(3, 12),
                         col3: `C${i + 1}`,
                         col4: `D${i + 1}`,
                         col5: `E${i + 1}`,

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

@@ -1,5 +1,6 @@
 :::tip
 1、Column width resize is useful when large text exists<br>
 2、Configure the column width resize through `columnWidthResizeOption`<br>
-3、It is recommended to set `scroll-width=0`, then dragging the column width will change the table width
+3、It is recommended to set `scroll-width=0`. When the total column width is greater than the container width, a horizontal scroll bar will appear<br>
+4、Set the default width of the column through `column.width`. If the total width of all columns is less than the container width, the column width will be adaptive
 :::

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

@@ -1214,12 +1214,11 @@ export const db = {
             },
             {
                 param: "sizeChange",
-                desc: `列宽改变后的回调函数。参数说明：\r1、<code>column</code>宽度改变的列信息\r2、<code>differWidth</code>列宽改变后差异的宽度\r3、<code>columnWidth</code>列宽改变后的宽度\r4、<code>tableWidth</code>列宽改变后的表格宽度`,
+                desc: `列宽改变后的回调函数。参数说明：\r1、<code>column</code>宽度改变的列信息\r2、<code>differWidth</code>列宽改变后差异的宽度\r3、<code>columnWidth</code>列宽改变后的宽度`,
                 type: `<code>Function({
                     column,
                     differWidth,
                     columnWidth,
-                    tableWidth
 })</code>`,
                 optionalVal: "-",
                 default: "-",

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

@@ -1,8 +1,8 @@
 :::anchor 列宽拖动
 
-你可以将鼠标悬浮在两列之间，然后拖动即可
+你可以将鼠标悬浮在两列之间，然后拖动即可。如果列宽度不设置，默认是 50px
 
-:::demo 1、通过 `columnMinWidth`设置列拖动的最小宽度<br>2、通过`sizeChange({ column, differWidth, columnWidth, tableWidth })`列拖动变化的回调信息
+:::demo 1、通过 `minWidth`设置列拖动的最小宽度<br>2、通过`sizeChange({ column, differWidth, columnWidth })`列拖动变化的回调信息
 
 ```html
 <template>
@@ -11,7 +11,6 @@
             <div>column:{{columnResizeInfo.column}}</div>
             <div>differWidth:{{columnResizeInfo.differWidth}}</div>
             <div>columnWidth:{{columnResizeInfo.columnWidth}}</div>
-            <div>tableWidth:{{columnResizeInfo.tableWidth}}</div>
         </div>
         <ve-table
             style="width:100%"
@@ -27,20 +26,20 @@
 </template>
 
 <script>
+    import Mock from "mockjs";
     export default {
         data() {
             return {
                 columnWidthResizeOption: {
                     // default false
                     enable: true,
                     // column resize min width
-                    columnMinWidth: 30,
+                    minWidth: 30,
                     // column size change
-                    sizeChange: ({ column, differWidth, columnWidth, tableWidth }) => {
+                    sizeChange: ({ column, differWidth, columnWidth }) => {
                         this.columnResizeInfo.column = column;
                         this.columnResizeInfo.differWidth = differWidth;
                         this.columnResizeInfo.columnWidth = columnWidth;
-                        this.columnResizeInfo.tableWidth = tableWidth;
                     },
                 },
                 columns: [
@@ -55,12 +54,14 @@
                             return ++rowIndex;
                         },
                     },
-                    { 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" },
+                    { field: "col1", key: "col1", title: "Col1", width: 220 },
+                    { field: "col2", key: "col2", title: "Col2", width: 220 },
+                    { field: "col3", key: "col3", title: "Col3", width: 220 },
+                    { field: "col4", key: "col4", title: "Col4", width: 220 },
+                    { field: "col5", key: "col5", title: "Col5", width: 220 },
+                    { field: "col6", key: "col6", title: "Col6", width: 220 },
+                    { field: "col7", key: "col7", title: "Col7" },
+                    { field: "col8", key: "col8", title: "Col8" },
                 ],
                 columnResizeInfo: {
                     column: "",
@@ -74,11 +75,11 @@
         methods: {
             initTableData() {
                 let data = [];
-                for (let i = 0; i < 8; i++) {
+                for (let i = 0; i < 5; i++) {
                     data.push({
                         rowKey: i,
                         col1: `A${i + 1}`,
-                        col2: `B${i + 1}`,
+                        col2: Mock.Random.sentence(3, 12),
                         col3: `C${i + 1}`,
                         col4: `D${i + 1}`,
                         col5: `E${i + 1}`,

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

@@ -1,5 +1,6 @@
 :::tip
 1、当存在大文本时，列宽调整将会很有用<br>
 2、通过`columnWidthResizeOption`设置列宽拖动功能<br>
-3、建议设置`scroll-width=0`，那么列宽拖动将会改变表格宽度
+3、建议设置`scroll-width=0`，那么当列宽总和大于容器宽度时，将会出横向滚动条<br>
+4、通过`column.width` 设置列的默认宽度，如果所有列宽总和小于容器宽度，列宽度将会自适应
 :::