Skip to content

Commit 34bae82

Browse files
huangshuweihuangshuwei
committed
refine doc
1 parent 7747e82 commit 34bae82

File tree

4 files changed

+198
-0
lines changed

4 files changed

+198
-0
lines changed

‎examples/src/docs/en/ve-table/virtual-scroll/dynamic-enable.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
:::anchor Dynamically turns virtual scrolling on or off
2+
3+
If you have the need to dynamically turn virtual scrolling on or off,Then you only need to modify the value of `virtualScrollOption.enable`. F12 view rendering results
4+
5+
:::demo
6+
7+
```html
8+
<template>
9+
<div>
10+
<el-button @click="switchVirtual(1)">Enable virtual scroll</el-button>
11+
<el-button @click="switchVirtual(0)">Disable virtual scroll</el-button>
12+
<br />
13+
<br />
14+
<div>virtual scroll state：{{ virtualScrollOption.enable ? "Enable" : "Disabled" }}</div>
15+
<br />
16+
<ve-table
17+
:max-height="500"
18+
:virtual-scroll-option="virtualScrollOption"
19+
:columns="columns"
20+
:table-data="tableData"
21+
row-key-field-name="rowKey"
22+
/>
23+
</div>
24+
</template>
25+
26+
<script>
27+
export default {
28+
data() {
29+
return {
30+
virtualScrollOption: {
31+
// 是否开启
32+
enable: false,
33+
},
34+
columns: [
35+
{
36+
field: "index",
37+
key: "a",
38+
title: "#",
39+
width: 100,
40+
align: "left",
41+
},
42+
{
43+
field: "name",
44+
key: "b",
45+
title: "Name",
46+
width: 200,
47+
align: "left",
48+
},
49+
{
50+
field: "hobby",
51+
key: "c",
52+
title: "Hobby",
53+
width: 300,
54+
align: "left",
55+
},
56+
{
57+
field: "address",
58+
key: "d",
59+
title: "Address",
60+
width: "",
61+
align: "left",
62+
},
63+
],
64+
tableData: [],
65+
};
66+
},
67+
methods: {
68+
// switch virtual scroll
69+
switchVirtual(enable) {
70+
this.virtualScrollOption.enable = enable ? true : false;
71+
},
72+
// createTableData
73+
createTableData() {
74+
let data = [];
75+
for (let i = 0; i < 100; i++) {
76+
data.push({
77+
rowKey: i,
78+
index: i,
79+
name: `name${i}`,
80+
hobby: `hobby${i}`,
81+
address: `address${i}`,
82+
});
83+
}
84+
85+
this.tableData = data;
86+
},
87+
},
88+
89+
mounted() {
90+
this.createTableData();
91+
},
92+
};
93+
</script>
94+
```
95+
96+
:::

‎examples/src/docs/en/ve-table/virtual-scroll/main.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<ColumnFixed />
1313
<FooterSummary />
1414
<CombineLazyLoad />
15+
<DynamicEnable />
1516
<API title="API" anchor="API" desc="virtualScrollOption option" />
1617
</div>
1718
</template>
@@ -27,6 +28,7 @@ import FooterSummary from "../footer-summary/virtual-scroll.md";
2728
import ColumnFixed from "./column-fixed.md";
2829
import RowIndex from "./row-index.md";
2930
import CombineLazyLoad from "./combine-lazy-load.md";
31+
import DynamicEnable from "./dynamic-enable.md";
3032
import API from "../api/virtual-scroll-option-props";
3133
3234
export default {
@@ -43,6 +45,7 @@ export default {
4345
FooterSummary,
4446
RowIndex,
4547
CombineLazyLoad,
48+
DynamicEnable,
4649
API,
4750
},
4851
};

‎examples/src/docs/zh/ve-table/virtual-scroll/dynamic-enable.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
:::anchor 动态开启或关闭虚拟滚动
2+
3+
如果你存在动态开启或者关闭虚拟滚动的需求，那么只需要修改`virtualScrollOption.enable`即可。F12 查看渲染结果
4+
5+
:::demo
6+
7+
```html
8+
<template>
9+
<div>
10+
<el-button @click="switchVirtual(1)">开启虚拟滚动</el-button>
11+
<el-button @click="switchVirtual(0)">禁用虚拟滚动</el-button>
12+
<br />
13+
<br />
14+
<div>虚拟滚动状态：{{ virtualScrollOption.enable ? "已开启" : "已禁用" }}</div>
15+
<br />
16+
<ve-table
17+
:max-height="500"
18+
:virtual-scroll-option="virtualScrollOption"
19+
:columns="columns"
20+
:table-data="tableData"
21+
row-key-field-name="rowKey"
22+
/>
23+
</div>
24+
</template>
25+
26+
<script>
27+
export default {
28+
data() {
29+
return {
30+
virtualScrollOption: {
31+
// 是否开启
32+
enable: false,
33+
},
34+
columns: [
35+
{
36+
field: "index",
37+
key: "a",
38+
title: "#",
39+
width: 100,
40+
align: "left",
41+
},
42+
{
43+
field: "name",
44+
key: "b",
45+
title: "Name",
46+
width: 200,
47+
align: "left",
48+
},
49+
{
50+
field: "hobby",
51+
key: "c",
52+
title: "Hobby",
53+
width: 300,
54+
align: "left",
55+
},
56+
{
57+
field: "address",
58+
key: "d",
59+
title: "Address",
60+
width: "",
61+
align: "left",
62+
},
63+
],
64+
tableData: [],
65+
};
66+
},
67+
methods: {
68+
// switch virtual scroll
69+
switchVirtual(enable) {
70+
this.virtualScrollOption.enable = enable ? true : false;
71+
},
72+
// createTableData
73+
createTableData() {
74+
let data = [];
75+
for (let i = 0; i < 100; i++) {
76+
data.push({
77+
rowKey: i,
78+
index: i,
79+
name: `name${i}`,
80+
hobby: `hobby${i}`,
81+
address: `address${i}`,
82+
});
83+
}
84+
85+
this.tableData = data;
86+
},
87+
},
88+
89+
mounted() {
90+
this.createTableData();
91+
},
92+
};
93+
</script>
94+
```
95+
96+
:::

‎examples/src/docs/zh/ve-table/virtual-scroll/main.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<ColumnFixed />
1313
<FooterSummary />
1414
<CombineLazyLoad />
15+
<DynamicEnable />
1516
<API title="API" anchor="API" desc="virtualScrollOption 虚拟滚动配置" />
1617
</div>
1718
</template>
@@ -27,6 +28,7 @@ import FooterSummary from "../footer-summary/virtual-scroll.md";
2728
import ColumnFixed from "./column-fixed.md";
2829
import RowIndex from "./row-index.md";
2930
import CombineLazyLoad from "./combine-lazy-load.md";
31+
import DynamicEnable from "./dynamic-enable.md";
3032
import API from "../api/virtual-scroll-option-props";
3133
3234
export default {
@@ -43,6 +45,7 @@ export default {
4345
FooterSummary,
4446
RowIndex,
4547
CombineLazyLoad,
48+
DynamicEnable,
4649
API,
4750
},
4851
};

0 commit comments

Comments
 (0)