Skip to content

Commit a598d13

Browse files
huangshuweihuangshuwei
committed
add hide column doc
1 parent 985ea5c commit a598d13

File tree

5 files changed

+227
-0
lines changed

5 files changed

+227
-0
lines changed

‎examples/src/docs/en/ve-table/column-hidden/default-hidden-column.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
:::anchor Default Hidden Columns
2+
3+
The following example hides the hobby and name columns by default
4+
5+
:::demo Set the default hidden columns through the `defaultHiddenColumnKeys` property
6+
7+
```html
8+
<template>
9+
<ve-table :columns="columns" :table-data="tableData" :columnHiddenOption="columnHiddenOption" />
10+
</template>
11+
12+
<script>
13+
export default {
14+
data() {
15+
return {
16+
columnHiddenOption: {
17+
// default hidden column keys
18+
defaultHiddenColumnKeys: ["hobby", "name"],
19+
},
20+
columns: [
21+
{ field: "name", key: "name", title: "Name" },
22+
{ field: "date", key: "date", title: "Date" },
23+
{ field: "hobby", key: "hobby", title: "Hobby" },
24+
{ field: "address", key: "address", title: "Address" },
25+
],
26+
tableData: [
27+
{
28+
name: "John",
29+
date: "1900-05-20",
30+
hobby: "coding and coding repeat",
31+
address: "No.1 Century Avenue, Shanghai",
32+
},
33+
{
34+
name: "Dickerson",
35+
date: "1910-06-20",
36+
hobby: "coding and coding repeat",
37+
address: "No.1 Century Avenue, Beijing",
38+
},
39+
{
40+
name: "Larsen",
41+
date: "2000-07-20",
42+
hobby: "coding and coding repeat",
43+
address: "No.1 Century Avenue, Chongqing",
44+
},
45+
{
46+
name: "Geneva",
47+
date: "2010-08-20",
48+
hobby: "coding and coding repeat",
49+
address: "No.1 Century Avenue, Xiamen",
50+
},
51+
{
52+
name: "Jami",
53+
date: "2020-09-20",
54+
hobby: "coding and coding repeat",
55+
address: "No.1 Century Avenue, Shenzhen",
56+
},
57+
],
58+
};
59+
},
60+
};
61+
</script>
62+
```
63+
64+
:::

‎examples/src/docs/en/ve-table/column-hidden/explain.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
:::tip
2+
1、Use `columnHiddenOption` to hide columns<br>
3+
2、You can also control the hiding and show of columns through instance methods
4+
5+
:::

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

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
:::anchor Instance methods
2+
3+
:::demo 1、Hide columns through instance method `hideColumnsByKeys(keys)` <br>2、Show hidden columns through instance method `showColumnsByKeys(keys)`
4+
5+
```html
6+
<template>
7+
<div>
8+
<button class="button-demo" @click="hideColumns(['col1'])">Hide col1</button>
9+
<button class="button-demo" @click="hideColumns(['col2'])">Hide col2</button>
10+
<button class="button-demo" @click="hideColumns(['col3'])">Hide col3</button>
11+
<button class="button-demo" @click="hideColumns(['col1','col2','col3'])">
12+
Hide col1、col2、col3
13+
</button>
14+
<br />
15+
<br />
16+
<button class="button-demo" @click="showColumns(['col1'])">Show col1</button>
17+
<button class="button-demo" @click="showColumns(['col2'])">Show col2</button>
18+
<button class="button-demo" @click="showColumns(['col3'])">Show col3</button>
19+
<button class="button-demo" @click="showColumns(['col1','col2','col3'])">
20+
Show col1、col2、col3
21+
</button>
22+
<br />
23+
<br />
24+
<ve-table
25+
ref="tableRef"
26+
border-y
27+
:columns="columns"
28+
:table-data="tableData"
29+
:columnHiddenOption="columnHiddenOption"
30+
/>
31+
</div>
32+
</template>
33+
34+
<script>
35+
export default {
36+
data() {
37+
return {
38+
columnHiddenOption: {
39+
// default hidden column keys
40+
defaultHiddenColumnKeys: ["col8"],
41+
},
42+
columns: [
43+
{ field: "col1", key: "col1", title: "col1", width: "10%" },
44+
{
45+
title: "col2-col3",
46+
children: [
47+
{
48+
field: "col2",
49+
key: "col2",
50+
title: "col2",
51+
width: 100,
52+
},
53+
{
54+
field: "col3",
55+
key: "col3",
56+
title: "col3",
57+
width: 110,
58+
},
59+
],
60+
},
61+
{
62+
title: "col4-col5-col6",
63+
children: [
64+
{
65+
title: "col4-col5",
66+
children: [
67+
{
68+
field: "col4",
69+
key: "col4",
70+
title: "col4",
71+
width: 130,
72+
},
73+
{
74+
field: "col5",
75+
key: "col5",
76+
title: "col5",
77+
width: 140,
78+
},
79+
],
80+
},
81+
{
82+
title: "col6",
83+
field: "col6",
84+
key: "col6",
85+
width: 140,
86+
},
87+
],
88+
},
89+
{ field: "col7", key: "col7", title: "col7", width: 150 },
90+
{ field: "col8", key: "col8", title: "col8", width: 160 },
91+
],
92+
tableData: [],
93+
};
94+
},
95+
methods: {
96+
// hidden columns
97+
hideColumns(keys) {
98+
this.$refs["tableRef"].hideColumnsByKeys(keys);
99+
},
100+
// show cloumns
101+
showColumns(keys) {
102+
this.$refs["tableRef"].showColumnsByKeys(keys);
103+
},
104+
initTableData() {
105+
let data = [];
106+
for (let i = 0; i < 3; i++) {
107+
data.push({
108+
rowKey: i,
109+
col1: "col1-" + i,
110+
col2: "col2-" + i,
111+
col3: "col3-" + i,
112+
col4: "col4-" + i,
113+
col5: "col5-" + i,
114+
col6: "col6-" + i,
115+
col7: "col7-" + i,
116+
col8: "col8-" + i,
117+
});
118+
}
119+
this.tableData = data;
120+
},
121+
},
122+
created() {
123+
this.initTableData();
124+
},
125+
};
126+
</script>
127+
```
128+
129+
:::

‎examples/src/docs/en/ve-table/column-hidden/main.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div>
3+
<h2>Column Hidden</h2>
4+
<Explain />
5+
<DefaultHiddenColumnKeys />
6+
<InstanceMethods />
7+
</div>
8+
</template>
9+
<script>
10+
import Explain from "./explain.md";
11+
import DefaultHiddenColumnKeys from "./default-hidden-column.md";
12+
import InstanceMethods from "./instance-methods.md";
13+
14+
export default {
15+
name: "basic-main",
16+
components: {
17+
Explain,
18+
DefaultHiddenColumnKeys,
19+
InstanceMethods,
20+
},
21+
};
22+
</script>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,13 @@ const config = [
112112
name: "Column Fixed",
113113
meta: { keepAlive: true },
114114
},
115+
{
116+
path: "column-hidden",
117+
component: () =>
118+
import("@/docs/en/ve-table/column-hidden/main.vue"),
119+
name: "Column Hidden",
120+
meta: { keepAlive: true },
121+
},
115122
{
116123
path: "header-fixed",
117124
component: () =>

0 commit comments

Comments
 (0)