Skip to content

Commit a8304b1

Browse files
huangshuweihuangshuwei
committed
add cell selection instance method
1 parent 07f5165 commit a8304b1

File tree

4 files changed

+290
-0
lines changed

4 files changed

+290
-0
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@
55
<ShortCuts />
66
<Base />
77
<DisableSelection />
8+
<SetSelectionInstance />
89
</div>
910
</template>
1011
<script>
1112
import Explain from "./explain.md";
1213
import ShortCuts from "./shortcuts.md";
1314
import Base from "./base.md";
1415
import DisableSelection from "./disable-selection.md";
16+
import SetSelectionInstance from "./set-selection-instance.md";
1517
1618
export default {
1719
name: "cell-selection",
@@ -20,6 +22,7 @@ export default {
2022
ShortCuts,
2123
Base,
2224
DisableSelection,
25+
SetSelectionInstance,
2326
},
2427
};
2528
</script>

‎examples/src/docs/en/ve-table/cell-selection/set-selection-instance.md‎

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

‎examples/src/docs/zh/ve-table/cell-selection/main.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@
55
<ShortCuts />
66
<Base />
77
<DisableSelection />
8+
<SetSelectionInstance />
89
</div>
910
</template>
1011
<script>
1112
import Explain from "./explain.md";
1213
import ShortCuts from "./shortcuts.md";
1314
import Base from "./base.md";
1415
import DisableSelection from "./disable-selection.md";
16+
import SetSelectionInstance from "./set-selection-instance.md";
1517
1618
export default {
1719
name: "cell-selection",
@@ -20,6 +22,7 @@ export default {
2022
ShortCuts,
2123
Base,
2224
DisableSelection,
25+
SetSelectionInstance,
2326
},
2427
};
2528
</script>

‎examples/src/docs/zh/ve-table/cell-selection/set-selection-instance.md‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
:::anchor 单元格选中实例方法
2+
3+
:::demo 你可以通过实例方法`setCellSelection`设置单元格选中
4+
5+
```html
6+
<template>
7+
<div>
8+
<button class="button-demo" @click="setCellSelection(29,'e')">选中第30行第5列</button>
9+
<button class="button-demo" @click="setCellSelection(1,'a')">选中第2行第1列</button>
10+
<br />
11+
<br />
12+
<ve-table
13+
ref="tableRef"
14+
fixed-header
15+
:scroll-width="1600"
16+
:max-height="380"
17+
border-y
18+
:columns="columns"
19+
:table-data="tableData"
20+
rowKeyFieldName="rowKey"
21+
/>
22+
</div>
23+
</template>
24+
25+
<script>
26+
export default {
27+
data() {
28+
return {
29+
cellSelectionOption: {
30+
// disble cell selection
31+
enable: true,
32+
},
33+
columns: [
34+
{
35+
field: "col1",
36+
key: "a",
37+
title: "col1",
38+
width: 50,
39+
fixed: "left",
40+
},
41+
{
42+
title: "col2-col3",
43+
fixed: "left",
44+
children: [
45+
{
46+
field: "col2",
47+
key: "b",
48+
title: "col2",
49+
width: 50,
50+
},
51+
{
52+
field: "col3",
53+
key: "c",
54+
title: "col3",
55+
width: 50,
56+
},
57+
],
58+
},
59+
{
60+
title: "col4-col5-col6",
61+
children: [
62+
{
63+
title: "col4-col5",
64+
children: [
65+
{
66+
field: "col4",
67+
key: "d",
68+
title: "col4",
69+
width: 130,
70+
},
71+
{
72+
field: "col5",
73+
key: "e",
74+
title: "col5",
75+
width: 140,
76+
},
77+
],
78+
},
79+
{
80+
title: "col6",
81+
field: "col6",
82+
key: "f",
83+
width: 140,
84+
},
85+
],
86+
},
87+
{
88+
title: "col7",
89+
fixed: "right",
90+
children: [
91+
{
92+
title: "col7-1",
93+
field: "col7",
94+
key: "g",
95+
width: 50,
96+
},
97+
],
98+
},
99+
{
100+
field: "col8",
101+
key: "h",
102+
title: "col8",
103+
width: 50,
104+
fixed: "right",
105+
},
106+
],
107+
tableData: [],
108+
};
109+
},
110+
methods: {
111+
// set cell selection
112+
setCellSelection(rowKey, colKey) {
113+
this.$refs["tableRef"].setCellSelection({ rowKey, colKey });
114+
},
115+
initTableData() {
116+
let data = [];
117+
for (let i = 0; i < 50; i++) {
118+
data.push({
119+
rowKey: i,
120+
col1: i,
121+
col2: i,
122+
col3: i,
123+
col4: i,
124+
col5: i,
125+
col6: i,
126+
col7: i,
127+
col8: i,
128+
});
129+
}
130+
this.tableData = data;
131+
},
132+
},
133+
created() {
134+
this.initTableData();
135+
},
136+
};
137+
</script>
138+
```
139+
140+
:::

0 commit comments

Comments
 (0)