Skip to content

Commit 4cea45f

Browse files
huangshuweihuangshuwei
committed
doc fine
1 parent 103414a commit 4cea45f

File tree

9 files changed

+383
-2
lines changed

9 files changed

+383
-2
lines changed

‎examples/src/docs/en/ve-table/cell-autofill/autofill-direction.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
:::anchor Cell autifill direction
2+
3+
:::demo It can be set to enable autofilling in a certain direction
4+
5+
```html
6+
<template>
7+
<div>
8+
<el-radio-group @change="autofillTypeChang" v-model="autofillType">
9+
<el-radio label="Horizontal">Horizontal</el-radio>
10+
<el-radio label="Vertical">Vertical</el-radio>
11+
<el-radio label="All">All</el-radio>
12+
</el-radio-group>
13+
<br />
14+
<br />
15+
<ve-table
16+
fixed-header
17+
border-y
18+
:columns="columns"
19+
:table-data="tableData"
20+
:cell-autofill-option="cellAutofillOption"
21+
rowKeyFieldName="rowKey"
22+
/>
23+
</div>
24+
</template>
25+
26+
<script>
27+
export default {
28+
data() {
29+
return {
30+
autofillType: "All",
31+
cellAutofillOption: {
32+
directionX: true,
33+
directionY: true,
34+
},
35+
columns: [
36+
{ field: "col1", key: "col1", title: "Col1" },
37+
{ field: "col2", key: "col2", title: "Col2" },
38+
{ field: "col3", key: "col3", title: "Col3" },
39+
{ field: "col4", key: "col4", title: "Col4" },
40+
{ field: "col5", key: "col5", title: "Col5" },
41+
{ field: "col6", key: "col6", title: "Col6" },
42+
],
43+
tableData: [],
44+
};
45+
},
46+
methods: {
47+
autofillTypeChang(type) {
48+
this.cellAutofillOption.directionX = false;
49+
this.cellAutofillOption.directionY = false;
50+
if (type === "Horizontal") {
51+
this.cellAutofillOption.directionX = true;
52+
} else if (type === "Vertical") {
53+
this.cellAutofillOption.directionY = true;
54+
} else if (type === "All") {
55+
this.cellAutofillOption.directionX = true;
56+
this.cellAutofillOption.directionY = true;
57+
}
58+
},
59+
initTableData() {
60+
let data = [];
61+
for (let i = 0; i < 8; i++) {
62+
data.push({
63+
rowKey: i,
64+
col1: `A${i + 1}`,
65+
col2: `B${i + 1}`,
66+
col3: `C${i + 1}`,
67+
col4: `D${i + 1}`,
68+
col5: `E${i + 1}`,
69+
col6: `F${i + 1}`,
70+
col7: `G${i + 1}`,
71+
col8: `H${i + 1}`,
72+
});
73+
}
74+
this.tableData = data;
75+
},
76+
},
77+
created() {
78+
this.initTableData();
79+
},
80+
};
81+
</script>
82+
```
83+
84+
:::

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

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

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:::tip
2+
1、像 excel 那样进行单元格内容的自动填充
3+
4+
:::

‎examples/src/docs/en/ve-table/cell-autofill/features.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
:::anchor 禁用单元格选择
2+
3+
:::demo 默认单元格选择是开启的，你可以通过 `cellSelectionOption.enable = false` 关闭
4+
5+
```html
6+
<template>
7+
<ve-table
8+
fixed-header
9+
border-y
10+
:columns="columns"
11+
:table-data="tableData"
12+
:cell-selection-option="cellSelectionOption"
13+
:cell-autofill-option="cellAutofillOption"
14+
rowKeyFieldName="rowKey"
15+
/>
16+
</template>
17+
18+
<script>
19+
export default {
20+
data() {
21+
return {
22+
cellAutofillOption: {
23+
directionX: true,
24+
directionY: true,
25+
beforeAutofill: ({
26+
direction,
27+
sourceSelectionRangeIndexes,
28+
targetSelectionRangeIndexes,
29+
sourceSelectionData,
30+
targetSelectionData,
31+
}) => {},
32+
afterAutofill: ({
33+
direction,
34+
sourceSelectionRangeIndexes,
35+
targetSelectionRangeIndexes,
36+
sourceSelectionData,
37+
targetSelectionData,
38+
}) => {},
39+
},
40+
cellSelectionOption: {
41+
enable: true,
42+
},
43+
columns: [
44+
{ field: "name", key: "a", title: "Name", align: "left" },
45+
{ field: "date", key: "b", title: "Date", align: "left" },
46+
{
47+
field: "hobby",
48+
key: "c",
49+
title: "Hobby",
50+
align: "right",
51+
},
52+
{ field: "address", key: "d", title: "Address" },
53+
],
54+
tableData: [
55+
{
56+
name: "John",
57+
date: "1900-05-20",
58+
hobby: "coding and coding repeat",
59+
address: "No.1 Century Avenue, Shanghai",
60+
rowKey: 0,
61+
},
62+
{
63+
name: "Dickerson",
64+
date: "1910-06-20",
65+
hobby: "coding and coding repeat",
66+
address: "No.1 Century Avenue, Beijing",
67+
rowKey: 1,
68+
},
69+
{
70+
name: "Larsen",
71+
date: "2000-07-20",
72+
hobby: "coding and coding repeat",
73+
address: "No.1 Century Avenue, Chongqing",
74+
rowKey: 2,
75+
},
76+
{
77+
name: "Geneva",
78+
date: "2010-08-20",
79+
hobby: "coding and coding repeat",
80+
address: "No.1 Century Avenue, Xiamen",
81+
rowKey: 3,
82+
},
83+
{
84+
name: "Jami",
85+
date: "2020-09-20",
86+
hobby: "coding and coding repeat",
87+
address: "No.1 Century Avenue, Shenzhen",
88+
rowKey: 4,
89+
},
90+
],
91+
};
92+
},
93+
};
94+
</script>
95+
```
96+
97+
:::

‎examples/src/docs/en/ve-table/cell-autofill/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>Cell Autofill</h2>
4+
<Base />
5+
<AutofillDirection />
6+
<API />
7+
</div>
8+
</template>
9+
<script>
10+
import Base from "./base.md";
11+
import AutofillDirection from "./autofill-direction.md";
12+
import API from "../api/cell-autofill-option-props";
13+
14+
export default {
15+
name: "cell-selection",
16+
components: {
17+
Base,
18+
AutofillDirection,
19+
API,
20+
},
21+
};
22+
</script>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:::anchor 快捷键
2+
3+
暂无

‎examples/src/docs/zh/ve-table/cell-autofill/autofill-direction.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
:::anchor 自动填充方向
22

3-
:::demo --
3+
:::demo 可以设置在某一个方向开启自动填充
44

55
```html
66
<template>

‎examples/src/docs/zh/ve-table/cell-autofill/explain.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
:::tip
2-
1、
2+
1、像 excel 那样进行单元格内容的自动填充
33

44
:::

0 commit comments

Comments
 (0)