Skip to content

Commit 0e913f4

Browse files
huangshuweihuangshuwei
committed
add doc
1 parent 92d914d commit 0e913f4

File tree

6 files changed

+376
-0
lines changed

6 files changed

+376
-0
lines changed

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

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
:::anchor Basic usage
2+
3+
Right click the table area to view the effect
4+
5+
:::demo
6+
7+
```html
8+
<template>
9+
<div>
10+
<ve-table
11+
row-key-field-name="rowKey"
12+
:fixed-header="true"
13+
:columns="columns"
14+
:table-data="tableData"
15+
:row-style-option="rowStyleOption"
16+
border-y
17+
:contextmenu-body-option="contextmenuBodyOption"
18+
/>
19+
</div>
20+
</template>
21+
22+
<script>
23+
export default {
24+
data() {
25+
return {
26+
// contextmenu body option
27+
contextmenuBodyOption: {
28+
// callback for all options
29+
callback: ({ type, selection }) => {
30+
console.log("type::", type);
31+
console.log("selection::", selection);
32+
},
33+
34+
// contextmenus
35+
contextmenus: [
36+
{
37+
type: "INSERT_ROW_ABOVE",
38+
},
39+
{
40+
type: "INSERT_ROW_BELOW",
41+
},
42+
{
43+
type: "SEPARATOR",
44+
},
45+
{
46+
type: "REMOVE_ROW",
47+
},
48+
{
49+
type: "HIDE_COLUMN",
50+
},
51+
],
52+
},
53+
54+
rowStyleOption: {
55+
clickHighlight: false,
56+
},
57+
columns: [
58+
{
59+
field: "",
60+
key: "a",
61+
title: "",
62+
width: 50,
63+
align: "center",
64+
renderBodyCell: ({ row, column, rowIndex }, h) => {
65+
return ++rowIndex;
66+
},
67+
},
68+
{
69+
field: "name",
70+
key: "name",
71+
title: "Name",
72+
align: "left",
73+
width: "15%",
74+
},
75+
{
76+
field: "date",
77+
key: "date",
78+
title: "Date",
79+
align: "left",
80+
width: "15%",
81+
},
82+
{
83+
field: "number",
84+
key: "number",
85+
title: "Number",
86+
align: "right",
87+
width: "30%",
88+
},
89+
{
90+
field: "address",
91+
key: "address",
92+
title: "Address",
93+
align: "left",
94+
width: "40%",
95+
},
96+
],
97+
// table data
98+
tableData: [
99+
{
100+
name: "John",
101+
date: "1900-05-20",
102+
number: "32",
103+
address: "No.1 Century Avenue, Shanghai",
104+
rowKey: 0,
105+
},
106+
{
107+
name: "Dickerson",
108+
date: "1910-06-20",
109+
number: "676",
110+
address: "No.1 Century Avenue, Beijing",
111+
rowKey: 1,
112+
},
113+
{
114+
name: "Larsen",
115+
date: "2000-07-20",
116+
number: "76",
117+
address: "No.1 Century Avenue, Chongqing",
118+
rowKey: 2,
119+
},
120+
{
121+
name: "Geneva",
122+
date: "2010-08-20",
123+
number: "7797",
124+
address: "No.1 Century Avenue, Xiamen",
125+
rowKey: 3,
126+
},
127+
{
128+
name: "Jami",
129+
date: "2020-09-20",
130+
number: "8978",
131+
address: "No.1 Century Avenue, Shenzhen",
132+
rowKey: 4,
133+
},
134+
],
135+
};
136+
},
137+
};
138+
</script>
139+
```
140+
141+
:::

‎examples/src/docs/en/ve-table/contextmenu/contextmenu-types.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
:::anchor contextmenu classification
2+
3+
You can choose and combine these contextmenu
4+
5+
| Feature | type |
6+
| :--------------- | :----------------- |
7+
| Split line | `SEPARATOR` |
8+
| Insert row above | `INSERT_ROW_ABOVE` |
9+
| Insert row below | `INSERT_ROW_BELOW` |
10+
| remove row | `REMOVE_ROW` |
11+
| hide row | `HIDE_COLUMN` |

‎examples/src/docs/en/ve-table/contextmenu/custom.md‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
:::anchor Customize contextmenu
2+
3+
:::demo
4+
5+
```html
6+
<template>
7+
<div>
8+
<ve-table
9+
row-key-field-name="rowKey"
10+
:fixed-header="true"
11+
:columns="columns"
12+
:table-data="tableData"
13+
:row-style-option="rowStyleOption"
14+
border-y
15+
:contextmenu-body-option="contextmenuBodyOption"
16+
/>
17+
</div>
18+
</template>
19+
20+
<script>
21+
export default {
22+
data() {
23+
return {
24+
// contextmenu body option
25+
contextmenuBodyOption: {
26+
// callback for all options
27+
callback: ({ type, selection }) => {
28+
const { rowKey, colKey } = selection;
29+
30+
const rowIndex = this.tableData.findIndex((x) => x.rowKey === rowKey);
31+
32+
// custom empty row
33+
if (type === "custom-empty-row") {
34+
this.tableData = this.tableData.map((rowData) => {
35+
// empty current row
36+
if (rowData.rowKey === rowKey) {
37+
this.columns.forEach((column) => {
38+
rowData[column.field] = "";
39+
});
40+
}
41+
return rowData;
42+
});
43+
}
44+
45+
console.log("type::", type);
46+
console.log("selection::", selection);
47+
},
48+
49+
// contextmenus
50+
contextmenus: [
51+
{
52+
type: "INSERT_ROW_ABOVE",
53+
},
54+
{
55+
type: "INSERT_ROW_BELOW",
56+
},
57+
{
58+
type: "SEPARATOR",
59+
},
60+
{
61+
type: "custom-empty-row",
62+
label: "empty row(custom)",
63+
},
64+
{
65+
type: "customType1",
66+
label: "custom menu",
67+
children: [
68+
{
69+
label: "menu5-1",
70+
type: "menu5-1-type",
71+
children: [
72+
{
73+
label: "menu5-1-1",
74+
type: "menu5-1-1-type",
75+
},
76+
{
77+
label: "menu5-2-2",
78+
type: "menu5-2-2-type",
79+
},
80+
],
81+
},
82+
{
83+
label: "menu5-2",
84+
disabled: true,
85+
},
86+
{
87+
type: "SEPARATOR",
88+
},
89+
{
90+
label: "menu5-3",
91+
type: "menu5-3-type",
92+
},
93+
],
94+
},
95+
],
96+
},
97+
98+
rowStyleOption: {
99+
clickHighlight: false,
100+
},
101+
columns: [
102+
{
103+
field: "",
104+
key: "a",
105+
title: "",
106+
width: 50,
107+
align: "center",
108+
renderBodyCell: ({ row, column, rowIndex }, h) => {
109+
return ++rowIndex;
110+
},
111+
},
112+
{
113+
field: "name",
114+
key: "name",
115+
title: "Name",
116+
align: "left",
117+
width: "15%",
118+
},
119+
{
120+
field: "date",
121+
key: "date",
122+
title: "Date",
123+
align: "left",
124+
width: "15%",
125+
},
126+
{
127+
field: "number",
128+
key: "number",
129+
title: "Number",
130+
align: "right",
131+
width: "30%",
132+
},
133+
{
134+
field: "address",
135+
key: "address",
136+
title: "Address",
137+
align: "left",
138+
width: "40%",
139+
},
140+
],
141+
// table data
142+
tableData: [
143+
{
144+
name: "John",
145+
date: "1900-05-20",
146+
number: "32",
147+
address: "No.1 Century Avenue, Shanghai",
148+
rowKey: 0,
149+
},
150+
{
151+
name: "Dickerson",
152+
date: "1910-06-20",
153+
number: "676",
154+
address: "No.1 Century Avenue, Beijing",
155+
rowKey: 1,
156+
},
157+
{
158+
name: "Larsen",
159+
date: "2000-07-20",
160+
number: "76",
161+
address: "No.1 Century Avenue, Chongqing",
162+
rowKey: 2,
163+
},
164+
{
165+
name: "Geneva",
166+
date: "2010-08-20",
167+
number: "7797",
168+
address: "No.1 Century Avenue, Xiamen",
169+
rowKey: 3,
170+
},
171+
{
172+
name: "Jami",
173+
date: "2020-09-20",
174+
number: "8978",
175+
address: "No.1 Century Avenue, Shenzhen",
176+
rowKey: 4,
177+
},
178+
],
179+
};
180+
},
181+
};
182+
</script>
183+
```
184+
185+
:::

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:::tip
2+
1、Some operations can be completed more conveniently through the right-click menu. For example, the cell editing function can easily insert or remove rows by right clicking<br>
3+
2、Of course, you can also customize the right-click menu
4+
:::

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<div>
3+
<h2>Contextmenu</h2>
4+
<Explain />
5+
<ContextmenuTypes />
6+
<Base />
7+
<Custom />
8+
<API title="API" anchor="API" desc="contextmenuBodyOption" />
9+
</div>
10+
</template>
11+
<script>
12+
import Explain from "./explain.md";
13+
import ContextmenuTypes from "./contextmenu-types.md";
14+
import Base from "./base.md";
15+
import Custom from "./custom.md";
16+
import API from "../api/contextmenu-body-option-props";
17+
18+
export default {
19+
name: "basic-main",
20+
components: {
21+
Explain,
22+
ContextmenuTypes,
23+
Base,
24+
Custom,
25+
API,
26+
},
27+
};
28+
</script>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,13 @@ const config = [
202202
name: "Cell Edit",
203203
meta: { keepAlive: true },
204204
},
205+
{
206+
path: "contextmenu",
207+
component: () =>
208+
import("@/docs/en/ve-table/contextmenu/main.vue"),
209+
name: "Contextmenu",
210+
meta: { keepAlive: true },
211+
},
205212
{
206213
path: "cell-ellipsis",
207214
component: () =>

0 commit comments

Comments
 (0)