Skip to content

Commit f186ba6

Browse files
huangshuweihuangshuwei
committed
add scrollToColKey instance method doc
1 parent 6df77cc commit f186ba6

File tree

5 files changed

+288
-2
lines changed

5 files changed

+288
-2
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@
33
<h2>Instance Methods</h2>
44
<Explain />
55
<ScrollTo />
6+
<ScrollToColKey />
67
<ScrollToRowKey />
78
<API title="API" anchor="API" desc="Instance Methods" />
89
</div>
910
</template>
1011
<script>
1112
import Explain from "./explain.md";
1213
import ScrollTo from "./scroll-to.md";
14+
import ScrollToColKey from "./scroll-to-col-key.md";
1315
import ScrollToRowKey from "./scroll-to-row-key.md";
1416
import API from "../api/instance-methods";
1517
@@ -18,6 +20,7 @@ export default {
1820
components: {
1921
Explain,
2022
ScrollTo,
23+
ScrollToColKey,
2124
ScrollToRowKey,
2225
API,
2326
},

‎examples/src/docs/en/ve-table/instance-methods/scroll-to-col-key.md‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
:::anchor scrollToColKey Column scroll method
2+
When there are fixed columns, you can use this method to display the specified columns in the visual area
3+
4+
:::demo 1、Scroll to the specified column position
5+
6+
```html
7+
<template>
8+
<div>
9+
<div style="margin-bottom:20px;line-height:3.0;">
10+
<button class="button-demo" @click="scrollToColKey('col4')">
11+
Scroll to col4 column
12+
</button>
13+
<button class="button-demo" @click="scrollToColKey('col5')">
14+
Scroll to col5 column
15+
</button>
16+
<button class="button-demo" @click="scrollToColKey('col6')">
17+
Scroll to col6 column
18+
</button>
19+
</div>
20+
<ve-table
21+
ref="tableRef"
22+
style="width:1000px"
23+
:scroll-width="1600"
24+
:max-height="350"
25+
border-y
26+
:columns="columns"
27+
:table-data="tableData"
28+
rowKeyFieldName="rowKey"
29+
/>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
data() {
36+
return {
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: "col4",
72+
title: "col4",
73+
width: 130,
74+
},
75+
{
76+
field: "col5",
77+
key: "col5",
78+
title: "col5",
79+
width: 140,
80+
},
81+
],
82+
},
83+
{
84+
title: "col6",
85+
field: "col6",
86+
key: "col6",
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+
};
112+
},
113+
methods: {
114+
initTableData() {
115+
let data = [];
116+
for (let i = 0; i < 80; i++) {
117+
data.push({
118+
rowKey: i,
119+
col1: i,
120+
col2: i,
121+
col3: i,
122+
col4: i,
123+
col5: i,
124+
col6: i,
125+
col7: i,
126+
col8: i,
127+
});
128+
}
129+
this.tableData = data;
130+
},
131+
// scroll y
132+
scrollToColKey(colKey) {
133+
this.$refs["tableRef"].scrollToColKey({ colKey });
134+
},
135+
},
136+
created() {
137+
this.initTableData();
138+
},
139+
};
140+
</script>
141+
```
142+
143+
:::

‎examples/src/docs/zh/ve-table/instance-methods/main.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@
33
<h2>实例方法</h2>
44
<Explain />
55
<ScrollTo />
6+
<ScrollToColKey />
67
<ScrollToRowKey />
78
<API title="API" anchor="API" desc="实例方法" />
89
</div>
910
</template>
1011
<script>
1112
import Explain from "./explain.md";
1213
import ScrollTo from "./scroll-to.md";
14+
import ScrollToColKey from "./scroll-to-col-key.md";
1315
import ScrollToRowKey from "./scroll-to-row-key.md";
1416
import API from "../api/instance-methods";
1517
@@ -18,6 +20,7 @@ export default {
1820
components: {
1921
Explain,
2022
ScrollTo,
23+
ScrollToColKey,
2124
ScrollToRowKey,
2225
API,
2326
},

‎examples/src/docs/zh/ve-table/instance-methods/scroll-to-col-key.md‎

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

‎examples/src/docs/zh/ve-table/instance-methods/scroll-to-row-key.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
:::anchor scrollToRowKey 滚动方法
1+
:::anchor scrollToRowKey 行滚动方法
22

3-
:::demo 1、将表格滚动到行为 rowKey 的位置
3+
:::demo 1、将表格滚动到指定行的位置
44

55
```html
66
<template>

0 commit comments

Comments
 (0)