refine doc

Author: huangshuwei

examples/src/docs/en/ve-table/operation-column/base.md

@@ -0,0 +1,77 @@
+:::anchor Basic usage
+
+:::demo
+
+```html
+<template>
+    <div>
+        <ve-table
+            :columns="columns"
+            :table-data="tableData"
+            borderY
+            :cell-autofill-option="cellAutofillOption"
+            :editOption="editOption"
+            rowKeyFieldName="rowKey"
+        />
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                cellAutofillOption: true,
+                editOption: {
+                    // cell value change
+                    cellValueChange: ({ row, column }) => {},
+                },
+                columns: [
+                    {
+                        field: "index",
+                        key: "index",
+                        operationColumn: true,
+                        title: "#",
+                        width: 50,
+                        align: "center",
+                        renderBodyCell: ({ row, column, rowIndex }, h) => {
+                            return ++rowIndex;
+                        },
+                        edit: true,
+                    },
+                    { field: "col1", key: "col1", title: "Col1", edit: true },
+                    { 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/operation-column/explain.md

@@ -0,0 +1,6 @@
+:::tip
+1、Set `operationColumn = true` in columns as the operation column <br>
+2、The operation column can exchange row positions (under development) and select all current rows (under development). This column function is similar to the operation column function of Excel<br>
+3、The cells in the operation column are not allowed to be selected, edited, or automatically filled
+
+:::

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

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <h2>Operation Column</h2>
+        <Explain />
+        <Base />
+    </div>
+</template>
+<script>
+import Explain from "./explain.md";
+import Base from "./base.md";
+
+export default {
+    name: "basic-main",
+    components: {
+        Explain,
+        Base,
+    },
+};
+</script>

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

@@ -1,5 +1,5 @@
 :::tip
-1、通过在 columns 设置 operationColumn=true 作为操作列 <br>
+1、通过在 columns 设置 `operationColumn=true` 作为操作列 <br>
 2、操作列可以交换行位置（开发中）、全选当前行（开发中）。此列功能类似 excel 的操作列功能<br>
 3、操作列的单元格不允许单元格选择、不允许单元格编辑、不允许单元格自动填充
 

examples/src/router/locale/en.router.config.js

@@ -196,6 +196,13 @@ const config = [
                 name: "Cell Span",
                 meta: { keepAlive: true },
             },
+            {
+                path: "operation-column",
+                component: () =>
+                    import("@/docs/en/ve-table/operation-column/main.vue"),
+                name: "operation column",
+                meta: { keepAlive: true },
+            },
             {
                 path: "cell-selection",
                 component: () =>