Skip to content

Commit a81a7dc

Browse files
huangshuweihuangshuwei
committed
doc refine
1 parent e6f4de0 commit a81a7dc

File tree

6 files changed

+266
-0
lines changed

6 files changed

+266
-0
lines changed

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

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
:::anchor Base usage
2+
3+
:::demo
4+
5+
```html
6+
<template>
7+
<div>
8+
<ve-table
9+
:max-height="350"
10+
:columns="columns"
11+
:table-data="tableData"
12+
borderY
13+
:cell-autofill-option="cellAutofillOption"
14+
:edit-option="editOption"
15+
row-key-field-name="rowKey"
16+
:clipboard-option="clipboardOption"
17+
:virtual-scroll-option="virtualScrollOption"
18+
/>
19+
</div>
20+
</template>
21+
22+
<script>
23+
export default {
24+
data() {
25+
return {
26+
// clipboard option
27+
clipboardOption: {
28+
copy: true,
29+
paste: true,
30+
cut: true,
31+
delete: true,
32+
beforeCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
33+
console.log("beforeCopy");
34+
this.log({ data, selectionRangeIndexes, selectionRangeKeys });
35+
},
36+
afterCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
37+
console.log("afterCopy");
38+
this.log({ data, selectionRangeIndexes, selectionRangeKeys });
39+
},
40+
beforePaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
41+
console.log("beforePaste");
42+
this.log({ data, selectionRangeIndexes, selectionRangeKeys });
43+
},
44+
afterPaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
45+
console.log("afterPaste");
46+
this.log({ data, selectionRangeIndexes, selectionRangeKeys });
47+
},
48+
beforeCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
49+
console.log("beforeCut");
50+
this.log({ data, selectionRangeIndexes, selectionRangeKeys });
51+
},
52+
afterCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
53+
console.log("afterCut");
54+
this.log({ data, selectionRangeIndexes, selectionRangeKeys });
55+
},
56+
beforeDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
57+
return false;
58+
59+
console.log("beforeDelete");
60+
this.log({ data, selectionRangeIndexes, selectionRangeKeys });
61+
},
62+
afterDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
63+
console.log("afterDelete");
64+
this.log({ data, selectionRangeIndexes, selectionRangeKeys });
65+
},
66+
},
67+
virtualScrollOption: {
68+
// 是否开启
69+
enable: false,
70+
},
71+
cellAutofillOption: true,
72+
editOption: {
73+
// cell value change
74+
cellValueChange: ({ row, column }) => {},
75+
},
76+
columns: [
77+
{
78+
field: "index",
79+
key: "index",
80+
operationColumn: true,
81+
title: "#",
82+
width: 35,
83+
align: "center",
84+
renderBodyCell: ({ row, column, rowIndex }, h) => {
85+
return ++rowIndex;
86+
},
87+
},
88+
{ field: "col1", key: "col1", title: "Col1", edit: true, width: 150 },
89+
{ field: "col2", key: "col2", title: "Col2", edit: true, width: 150 },
90+
{ field: "col3", key: "col3", title: "Col3", edit: true, width: 150 },
91+
{ field: "col4", key: "col4", title: "Col4", edit: true, width: 150 },
92+
{ field: "col5", key: "col5", title: "Col5", edit: true, width: 150 },
93+
{ field: "col6", key: "col6", title: "Col6", edit: true, width: 150 },
94+
],
95+
tableData: [],
96+
};
97+
},
98+
methods: {
99+
initTableData() {
100+
let data = [];
101+
for (let i = 0; i < 100; i++) {
102+
data.push({
103+
rowKey: `row${i}`,
104+
col1: `A${i + 1}`,
105+
col2: `B${i + 1}`,
106+
col3: `C${i + 1}`,
107+
col4: `D${i + 1}`,
108+
col5: `E${i + 1}`,
109+
col6: `F${i + 1}`,
110+
col7: `G${i + 1}`,
111+
col8: `H${i + 1}`,
112+
});
113+
}
114+
this.tableData = data;
115+
},
116+
log({ data, selectionRangeIndexes, selectionRangeKeys }) {
117+
console.log("data::", data);
118+
console.log("selectionRangeIndexes::", selectionRangeIndexes);
119+
console.log("selectionRangeKeys::", selectionRangeKeys);
120+
},
121+
},
122+
created() {
123+
this.initTableData();
124+
},
125+
};
126+
</script>
127+
```
128+
129+
:::

‎examples/src/docs/en/ve-table/clipboard/explain.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:::tip
2+
1、You can select cells and copy, paste, cut and delete them in batches like excle
3+
4+
:::

‎examples/src/docs/en/ve-table/clipboard/features-bak.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
:::anchor 基础功能
2+
3+
:::demo
4+
5+
```html
6+
<template>
7+
<div>
8+
<ve-table
9+
:columns="columns"
10+
:table-data="tableData"
11+
borderY
12+
:cell-autofill-option="cellAutofillOption"
13+
:editOption="editOption"
14+
row-key-field-name="rowKey"
15+
clipboard-option="clipboardOption"
16+
/>
17+
</div>
18+
</template>
19+
20+
<script>
21+
export default {
22+
data() {
23+
return {
24+
cellAutofillOption: true,
25+
editOption: {
26+
// cell value change
27+
cellValueChange: ({ row, column }) => {},
28+
},
29+
clipboardOption: {
30+
copy: true,
31+
paste: true,
32+
cut: true,
33+
delete: true,
34+
beforeCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
35+
return true;
36+
},
37+
afterCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {},
38+
beforePaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {},
39+
afterPaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {},
40+
beforeCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {},
41+
afterCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {},
42+
beforeDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {},
43+
afterDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {},
44+
},
45+
columns: [
46+
{
47+
field: "index",
48+
key: "index",
49+
operationColumn: true,
50+
title: "#",
51+
width: 50,
52+
align: "center",
53+
renderBodyCell: ({ row, column, rowIndex }, h) => {
54+
return ++rowIndex;
55+
},
56+
edit: true,
57+
},
58+
{ field: "col1", key: "col1", title: "Col1", edit: true },
59+
{ field: "col2", key: "col2", title: "Col2" },
60+
{ field: "col3", key: "col3", title: "Col3" },
61+
{ field: "col4", key: "col4", title: "Col4" },
62+
{ field: "col5", key: "col5", title: "Col5" },
63+
{ field: "col6", key: "col6", title: "Col6" },
64+
],
65+
tableData: [],
66+
};
67+
},
68+
methods: {
69+
initTableData() {
70+
let data = [];
71+
for (let i = 0; i < 8; i++) {
72+
data.push({
73+
rowKey: i,
74+
col1: `A${i + 1}`,
75+
col2: `B${i + 1}`,
76+
col3: `C${i + 1}`,
77+
col4: `D${i + 1}`,
78+
col5: `E${i + 1}`,
79+
col6: `F${i + 1}`,
80+
col7: `G${i + 1}`,
81+
col8: `H${i + 1}`,
82+
});
83+
}
84+
this.tableData = data;
85+
},
86+
},
87+
created() {
88+
this.initTableData();
89+
},
90+
};
91+
</script>
92+
```
93+
94+
:::

‎examples/src/docs/en/ve-table/clipboard/main.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div>
3+
<h2>Clipboard</h2>
4+
<Explain />
5+
<ShortCuts />
6+
<Base />
7+
</div>
8+
</template>
9+
<script>
10+
import Explain from "./explain.md";
11+
import ShortCuts from "./shortcuts.md";
12+
import Base from "./base.md";
13+
14+
export default {
15+
name: "basic-main",
16+
components: {
17+
Explain,
18+
ShortCuts,
19+
Base,
20+
},
21+
};
22+
</script>

‎examples/src/docs/en/ve-table/clipboard/shortcuts.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
:::anchor Shortcuts
2+
3+
Clipboard supports the following shortcut keys (refer to excel shortcut keys):
4+
5+
| Feature | Shortcuts |
6+
| :----------------------------------- | :----------- |
7+
| Copy range cell values | `Ctrl` + `C` |
8+
| Paste (support excel content format) | `Ctrl` + `V` |
9+
| Cut range cell values | `Ctrl` + `X` |
10+
| Delete range cell values | `Delete` |

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,13 @@ const config = [
224224
name: "Cell Edit",
225225
meta: { keepAlive: true },
226226
},
227+
{
228+
path: "clipboard",
229+
component: () =>
230+
import("@/docs/en/ve-table/clipboard/main.vue"),
231+
name: "Clipboard",
232+
meta: { keepAlive: true },
233+
},
227234
{
228235
path: "contextmenu",
229236
component: () =>

0 commit comments

Comments
 (0)