Skip to content

Commit 81e5c2b

Browse files
huangshuweihuangshuwei
committed
add scrollTo doc
1 parent c1e675c commit 81e5c2b

File tree

8 files changed

+246
-0
lines changed

8 files changed

+246
-0
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:::tip
2+
1、表格
3+
4+
:::

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div>
3+
<h2>实例方法</h2>
4+
<Explain />
5+
<ScrollTo />
6+
</div>
7+
</template>
8+
<script>
9+
import Explain from "./explain.md";
10+
import ScrollTo from "./scroll-to.md";
11+
12+
export default {
13+
name: "basic-main",
14+
components: {
15+
Explain,
16+
ScrollTo,
17+
},
18+
};
19+
</script>

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

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
:::anchor scrollTo
2+
3+
:::demo 1、Params refer to [scrollTo](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTo)
4+
5+
```html
6+
<template>
7+
<div>
8+
<div style="margin-bottom:20px;line-height:3.0;">
9+
<button class="button-demo" @click="scrollY(1000)">Scroll vertically to 1000px</button>
10+
<button class="button-demo" @click="scrollY(500)">Scroll vertically to 500px</button>
11+
<button class="button-demo" @click="scrollY(0)">Scroll vertically to 0px</button>
12+
<button class="button-demo" @click="scrollX(500)">Scroll horizontally to 300px</button>
13+
<button class="button-demo" @click="scrollX(300)">Scroll horizontally to 200px</button>
14+
<button class="button-demo" @click="scrollX(0)">Scroll horizontally to 0px</button>
15+
</div>
16+
<ve-table
17+
ref="tableRef"
18+
style="width:1000px"
19+
:scroll-width="1600"
20+
:max-height="350"
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+
columns: [
34+
{ field: "col1", key: "a", title: "Title1", fixed: "left" },
35+
{ field: "col2", key: "b", title: "Title2", fixed: "left" },
36+
{ field: "col3", key: "c", title: "Title3" },
37+
{ field: "col4", key: "d", title: "Title4" },
38+
{ field: "col5", key: "e", title: "Title5" },
39+
{ field: "col6", key: "f", title: "Title6" },
40+
{ field: "col7", key: "g", title: "Title7" },
41+
{ field: "col8", key: "h", title: "Title8" },
42+
{
43+
field: "col9",
44+
key: "i",
45+
title: "Title9",
46+
fixed: "right",
47+
},
48+
{
49+
field: "col10",
50+
key: "j",
51+
title: "Title10",
52+
fixed: "right",
53+
},
54+
],
55+
};
56+
},
57+
methods: {
58+
initTableData() {
59+
let data = [];
60+
for (let i = 0; i < 80; i++) {
61+
data.push({
62+
rowkey: i,
63+
col1: i,
64+
col2: i,
65+
col3: i,
66+
col4: i,
67+
col5: i,
68+
col6: i,
69+
col7: i,
70+
col8: i,
71+
col9: i,
72+
col10: i,
73+
});
74+
}
75+
this.tableData = data;
76+
},
77+
// scroll y
78+
scrollY(val) {
79+
this.$refs["tableRef"].scrollTo({ top: val, behavior: "smooth" });
80+
},
81+
// scroll x
82+
scrollX(val) {
83+
this.$refs["tableRef"].scrollTo({ left: val, behavior: "smooth" });
84+
},
85+
},
86+
created() {
87+
this.initTableData();
88+
},
89+
};
90+
</script>
91+
```
92+
93+
:::

‎examples/src/docs/zh/ve-table/instance-methods/explain.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:::tip
2+
1、表格
3+
4+
:::

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div>
3+
<h2>实例方法</h2>
4+
<Explain />
5+
<ScrollTo />
6+
</div>
7+
</template>
8+
<script>
9+
import Explain from "./explain.md";
10+
import ScrollTo from "./scroll-to.md";
11+
12+
export default {
13+
name: "basic-main",
14+
components: {
15+
Explain,
16+
ScrollTo,
17+
},
18+
};
19+
</script>

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

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
:::anchor scrollTo 滚动方法
2+
3+
:::demo 1、参数请参考 [scrollTo](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTo)
4+
5+
```html
6+
<template>
7+
<div>
8+
<div style="margin-bottom:20px;line-height:3.0;">
9+
<button class="button-demo" @click="scrollY(1000)">垂直滚动到1000px</button>
10+
<button class="button-demo" @click="scrollY(500)">垂直滚动到500px</button>
11+
<button class="button-demo" @click="scrollY(0)">垂直滚动到0px</button>
12+
<button class="button-demo" @click="scrollX(500)">水平滚动到300px</button>
13+
<button class="button-demo" @click="scrollX(300)">水平滚动到200px</button>
14+
<button class="button-demo" @click="scrollX(0)">水平滚动到0px</button>
15+
</div>
16+
<ve-table
17+
ref="tableRef"
18+
style="width:1000px"
19+
:scroll-width="1600"
20+
:max-height="350"
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+
columns: [
34+
{ field: "col1", key: "a", title: "Title1", fixed: "left" },
35+
{ field: "col2", key: "b", title: "Title2", fixed: "left" },
36+
{ field: "col3", key: "c", title: "Title3" },
37+
{ field: "col4", key: "d", title: "Title4" },
38+
{ field: "col5", key: "e", title: "Title5" },
39+
{ field: "col6", key: "f", title: "Title6" },
40+
{ field: "col7", key: "g", title: "Title7" },
41+
{ field: "col8", key: "h", title: "Title8" },
42+
{
43+
field: "col9",
44+
key: "i",
45+
title: "Title9",
46+
fixed: "right",
47+
},
48+
{
49+
field: "col10",
50+
key: "j",
51+
title: "Title10",
52+
fixed: "right",
53+
},
54+
],
55+
};
56+
},
57+
methods: {
58+
initTableData() {
59+
let data = [];
60+
for (let i = 0; i < 80; i++) {
61+
data.push({
62+
rowkey: i,
63+
col1: i,
64+
col2: i,
65+
col3: i,
66+
col4: i,
67+
col5: i,
68+
col6: i,
69+
col7: i,
70+
col8: i,
71+
col9: i,
72+
col10: i,
73+
});
74+
}
75+
this.tableData = data;
76+
},
77+
// scroll y
78+
scrollY(val) {
79+
this.$refs["tableRef"].scrollTo({ top: val, behavior: "smooth" });
80+
},
81+
// scroll x
82+
scrollX(val) {
83+
this.$refs["tableRef"].scrollTo({ left: val, behavior: "smooth" });
84+
},
85+
},
86+
created() {
87+
this.initTableData();
88+
},
89+
};
90+
</script>
91+
```
92+
93+
:::

‎examples/src/router/locale/en.router.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,13 @@ const config = [
273273
name: "Data Empty",
274274
meta: { keepAlive: true },
275275
},
276+
{
277+
path: "instance-methods",
278+
component: () =>
279+
import("@/docs/en/ve-table/instance-methods/main.vue"),
280+
name: "Instance methods",
281+
meta: { keepAlive: true },
282+
},
276283
{
277284
path: "api",
278285
component: () => import("@/docs/en/ve-table/api/main.vue"),

‎examples/src/router/locale/zh.router.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,13 @@ const config = [
265265
name: "空数据",
266266
meta: { keepAlive: true },
267267
},
268+
{
269+
path: "instance-methods",
270+
component: () =>
271+
import("@/docs/zh/ve-table/instance-methods/main.vue"),
272+
name: "实例方法",
273+
meta: { keepAlive: true },
274+
},
268275
{
269276
path: "api",
270277
component: () => import("@/docs/zh/ve-table/api/main.vue"),

0 commit comments

Comments
 (0)