Skip to content

Commit 49bc9d3

Browse files
huangshuweihuangshuwei
committed
添加 scrollToRowKey 示例
1 parent 6f5f962 commit 49bc9d3

File tree

8 files changed

+365
-21
lines changed

8 files changed

+365
-21
lines changed

‎examples/src/docs/en/ve-table/api/db.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -462,10 +462,15 @@ export const db = {
462462
instanceMethods: {
463463
data: [
464464
{
465-
name: "scrollTop",
465+
name: "scrollTo",
466466
desc: `Scrolls the table to the specified position`,
467467
param: "Refer to <a href='https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTo'> MDN scrollTo</a>",
468468
},
469+
{
470+
name: "scrollToRowKey",
471+
desc: `Scroll the table to the location of the row key`,
472+
param: "{rowKey}",
473+
},
469474
],
470475
columns: columnsType2,
471476
},

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,25 @@
11
<template>
22
<div>
3-
<h2>实例方法</h2>
3+
<h2>Instance Methods</h2>
44
<Explain />
55
<ScrollTo />
6+
<ScrollToRowKey />
7+
<API title="API" anchor="API" desc="Instance Methods" />
68
</div>
79
</template>
810
<script>
911
import Explain from "./explain.md";
1012
import ScrollTo from "./scroll-to.md";
13+
import ScrollToRowKey from "./scroll-to-row-key.md";
14+
import API from "../api/instance-methods";
1115
1216
export default {
1317
name: "basic-main",
1418
components: {
1519
Explain,
1620
ScrollTo,
21+
ScrollToRowKey,
22+
API,
1723
},
1824
};
1925
</script>

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

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

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
:::anchor scrollTo
22

3-
:::demo 1、Params refer to [scrollTo](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTo)
3+
:::demo 1、Scroll the table to the specified location(px)<br>2、Params refer to [scrollTo](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTo)
44

55
```html
66
<template>

‎examples/src/docs/zh/ve-table/api/db.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -462,10 +462,15 @@ export const db = {
462462
instanceMethods: {
463463
data: [
464464
{
465-
name: "scrollTop",
465+
name: "scrollTo",
466466
desc: `使表格滚动到指定的位置`,
467467
param: "参考<a href='https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTo'> MDN scrollTo</a>",
468468
},
469+
{
470+
name: "scrollToRowKey",
471+
desc: `将表格滚动到行为rowKey的位置`,
472+
param: "{rowKey}",
473+
},
469474
],
470475
columns: columnsType2,
471476
},

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,23 @@
33
<h2>实例方法</h2>
44
<Explain />
55
<ScrollTo />
6+
<ScrollToRowKey />
7+
<API title="API" anchor="API" desc="实例方法" />
68
</div>
79
</template>
810
<script>
911
import Explain from "./explain.md";
1012
import ScrollTo from "./scroll-to.md";
13+
import ScrollToRowKey from "./scroll-to-row-key.md";
14+
import API from "../api/instance-methods";
1115
1216
export default {
1317
name: "basic-main",
1418
components: {
1519
Explain,
1620
ScrollTo,
21+
ScrollToRowKey,
22+
API,
1723
},
1824
};
1925
</script>

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

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

0 commit comments

Comments
 (0)