Skip to content

Commit e46ebc9

Browse files
huangshuweihuangshuwei
committed
refine doc
1 parent 425bc2c commit e46ebc9

File tree

10 files changed

+248
-686
lines changed

10 files changed

+248
-686
lines changed

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

Lines changed: 39 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,111 @@
1-
:::anchor 单条件筛选
2-
:::demo 1
1+
:::anchor Basic usage
2+
3+
:::demo The `cellValueChange` method will be triggered after cell editing is stopped,The parameter `row` is the updated row data information, and the parameter `column` is the currently edited column information
34

45
```html
56
<template>
6-
<ve-table
7-
rowKeyFieldName="rowKey"
8-
:max-height="300"
9-
:fixed-header="true"
10-
:columns="columns"
11-
:table-data="tableData"
12-
:editOption="editOption"
13-
/>
7+
<div>
8+
<ve-table
9+
rowKeyFieldName="rowKey"
10+
:fixed-header="true"
11+
:columns="columns"
12+
:table-data="tableData"
13+
:editOption="editOption"
14+
:rowStyleOption="rowStyleOption"
15+
border-y
16+
/>
17+
</div>
1418
</template>
1519

1620
<script>
1721
export default {
1822
data() {
1923
return {
20-
// edit option 可控单元格编辑
24+
rowStyleOption: {
25+
clickHighlight: false,
26+
},
27+
// edit option
2128
editOption: {
22-
activeRowkey: "1",
29+
// cell value change
30+
cellValueChange: ({ row, column }) => {
31+
console.log("cellValueChange row::", row);
32+
console.log("cellValueChange column::", column);
33+
},
2334
},
2435
columns: [
2536
{
2637
field: "name",
27-
key: "a",
38+
key: "name",
2839
title: "Name",
2940
align: "left",
3041
width: "15%",
31-
edit: {
32-
enable: true,
33-
},
42+
edit: true,
3443
},
3544
{
3645
field: "date",
37-
key: "b",
46+
key: "date",
3847
title: "Date",
3948
align: "left",
4049
width: "15%",
50+
edit: true,
4151
},
4252
{
43-
field: "hobby",
44-
key: "c",
45-
title: "Hobby",
46-
align: "center",
53+
field: "number",
54+
key: "number",
55+
title: "Number",
56+
align: "right",
4757
width: "30%",
58+
edit: true,
4859
},
4960
{
5061
field: "address",
51-
key: "d",
62+
key: "address",
5263
title: "Address",
5364
align: "left",
5465
width: "40%",
66+
edit: true,
5567
},
5668
],
5769
// table data
5870
tableData: [
5971
{
6072
name: "John",
6173
date: "1900-05-20",
62-
hobby: "coding and coding repeat",
74+
number: "32",
6375
address: "No.1 Century Avenue, Shanghai",
6476
rowKey: 0,
6577
},
6678
{
6779
name: "Dickerson",
6880
date: "1910-06-20",
69-
hobby: "coding and coding repeat",
81+
number: "676",
7082
address: "No.1 Century Avenue, Beijing",
7183
rowKey: 1,
7284
},
7385
{
7486
name: "Larsen",
7587
date: "2000-07-20",
76-
hobby: "coding and coding repeat",
88+
number: "76",
7789
address: "No.1 Century Avenue, Chongqing",
7890
rowKey: 2,
7991
},
8092
{
8193
name: "Geneva",
8294
date: "2010-08-20",
83-
hobby: "coding and coding repeat",
95+
number: "7797",
8496
address: "No.1 Century Avenue, Xiamen",
8597
rowKey: 3,
8698
},
8799
{
88100
name: "Jami",
89101
date: "2020-09-20",
90-
hobby: "coding and coding repeat",
102+
number: "8978",
91103
address: "No.1 Century Avenue, Shenzhen",
92104
rowKey: 4,
93105
},
94106
],
95107
};
96108
},
97-
methods: {},
98109
};
99110
</script>
100111
```

‎examples/src/docs/en/ve-table/cell-edit/combine-column-fixed.md‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
:::anchor Combine column fixed
2+
3+
:::demo
4+
5+
```html
6+
<template>
7+
<div>
8+
<ve-table
9+
:scroll-width="1600"
10+
:max-height="500"
11+
row-key-field-name="rowKey"
12+
:fixed-header="true"
13+
:columns="columns"
14+
:table-data="tableData"
15+
:edit-option="editOption"
16+
:row-style-option="rowStyleOption"
17+
:virtual-scroll-option="{enable:true}"
18+
border-y
19+
/>
20+
</div>
21+
</template>
22+
23+
<script>
24+
export default {
25+
data() {
26+
return {
27+
rowStyleOption: {
28+
clickHighlight: false,
29+
},
30+
// edit option
31+
editOption: {
32+
// cell value change
33+
cellValueChange: ({ row, column }) => {
34+
console.log("cellValueChange row::", row);
35+
console.log("cellValueChange column::", column);
36+
},
37+
},
38+
columns: [
39+
{
40+
field: "col1",
41+
key: "col1",
42+
title: "col1",
43+
width: 50,
44+
fixed: "left",
45+
edit: true,
46+
},
47+
{
48+
title: "col2-col3",
49+
fixed: "left",
50+
children: [
51+
{
52+
field: "col2",
53+
key: "col2",
54+
title: "col2",
55+
width: 50,
56+
edit: true,
57+
},
58+
{
59+
field: "col3",
60+
key: "col3",
61+
title: "col3",
62+
width: 50,
63+
edit: true,
64+
},
65+
],
66+
},
67+
{
68+
title: "col4-col5-col6",
69+
children: [
70+
{
71+
title: "col4-col5",
72+
children: [
73+
{
74+
field: "col4",
75+
key: "col4",
76+
title: "col4",
77+
width: 130,
78+
edit: true,
79+
},
80+
{
81+
field: "col5",
82+
key: "col5",
83+
title: "col5",
84+
width: 140,
85+
edit: true,
86+
},
87+
],
88+
},
89+
{
90+
title: "col6",
91+
field: "col6",
92+
key: "col6",
93+
width: 140,
94+
edit: true,
95+
},
96+
],
97+
},
98+
{
99+
title: "col7",
100+
fixed: "right",
101+
children: [
102+
{
103+
title: "col7-1",
104+
field: "col7",
105+
key: "col7",
106+
width: 50,
107+
edit: true,
108+
},
109+
],
110+
},
111+
{
112+
field: "col8",
113+
key: "col8",
114+
title: "col8",
115+
width: 50,
116+
fixed: "right",
117+
edit: true,
118+
},
119+
],
120+
// table data
121+
tableData: [],
122+
};
123+
},
124+
125+
methods: {
126+
initTableData() {
127+
let data = [];
128+
for (let i = 0; i < 100; i++) {
129+
data.push({
130+
rowKey: i,
131+
col1: i,
132+
col2: i,
133+
col3: i,
134+
col4: i,
135+
col5: i,
136+
col6: i,
137+
col7: i,
138+
col8: i,
139+
});
140+
}
141+
this.tableData = data;
142+
},
143+
},
144+
created() {
145+
this.initTableData();
146+
},
147+
};
148+
</script>
149+
```
150+
151+
:::

0 commit comments

Comments
 (0)