Merge remote-tracking branch 'origin/column-width-drag'

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/cell-autofill/explain.md

@@ -1,4 +1,4 @@
 :::tip
-1、像 excel 那样进行单元格内容的自动填充
+When there is data that needs to be copied repeatedly, you can automatically fill in the cell content like excel
 
 :::

examples/src/docs/en/ve-table/cell-autofill/main.vue

@@ -1,19 +1,22 @@
 <template>
     <div>
         <h2>Cell Autofill</h2>
+        <Explain />
         <Base />
         <AutofillDirection />
         <API title="API" anchor="API" />
     </div>
 </template>
 <script>
+import Explain from "./explain.md";
 import Base from "./base.md";
 import AutofillDirection from "./autofill-direction.md";
 import API from "../api/cell-autofill-option-props";
 
 export default {
     name: "cell-selection",
     components: {
+        Explain,
         Base,
         AutofillDirection,
         API,

examples/src/docs/en/ve-table/clipboard/base.md

@@ -10,6 +10,7 @@
             :columns="columns"
             :table-data="tableData"
             borderY
+            :rowStyleOption="rowStyleOption"
             :cell-autofill-option="cellAutofillOption"
             :edit-option="editOption"
             row-key-field-name="rowKey"
@@ -23,6 +24,10 @@
     export default {
         data() {
             return {
+                rowStyleOption: {
+                    clickHighlight: false,
+                    hoverHighlight: false,
+                },
                 // clipboard option
                 clipboardOption: {
                     copy: true,
@@ -54,8 +59,6 @@
                         this.log({ data, selectionRangeIndexes, selectionRangeKeys });
                     },
                     beforeDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
-                        return false;
-
                         console.log("beforeDelete");
                         this.log({ data, selectionRangeIndexes, selectionRangeKeys });
                     },

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

@@ -1,6 +1,6 @@
 :::tip
 1、The property `scroll-width` is the width of the scroll area<br>
-2、The attribute `scroll-width` is the width of the scroll area. When the outer container width is less than the `scroll-width` value, a horizontal scroll bar will appear; when the outer container width is greater than the `scroll-width` value, it will follow the container<br>
+2、The attribute `scroll-width` is the width of the scroll area. When the outer container width is less than the `scroll-width` value, a horizontal scroll bar will appear; when the outer container width is greater than the `scroll-width` value, it will follow the container;when 'scroll-width=0', the scroll bar will be according to your column width<br>
 3、Column width can not be set, or set to percentage, or pixel value (PX)<br>
 4、The `scroll-width` attribute is set, and the column width unit **is strongly recommended to be consistent!**<br>
 

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

@@ -0,0 +1,87 @@
+:::anchor Column Drag
+
+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>
+    <ve-table
+        style="width:100%"
+        :scroll-width="0"
+        :columns="columns"
+        :table-data="tableData"
+        :border-around="true"
+        :border-x="true"
+        :border-y="true"
+        :column-width-resize-option="columnWidthResizeOption"
+    />
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                columnWidthResizeOption: {
+                    // default false
+                    enable: true,
+                    // column resize min width
+                    minWidth: 30,
+                    // column size change
+                    sizeChange: ({ column, differWidth, columnWidth, tableWidth }) => {
+                        console.log("----------sizeChange----------");
+                        console.log("column::", column);
+                        console.log("differWidth::", differWidth);
+                        console.log("columnWidth::", columnWidth);
+                        console.log("tableWidth::", tableWidth);
+                    },
+                },
+                columns: [
+                    {
+                        field: "index",
+                        key: "index",
+                        title: "#",
+                        width: 50,
+                        align: "center",
+                        fixed: "left",
+                        renderBodyCell: ({ row, column, rowIndex }, h) => {
+                            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" },
+                ],
+                tableData: [],
+            };
+        },
+        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/column-resize/explain.md

@@ -0,0 +1,5 @@
+:::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
+:::

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

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <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>