Skip to content

Commit 9cd6607

Browse files
huangshuweihuangshuwei
committed
新增表格宽度文档说明
1 parent b49ef1b commit 9cd6607

File tree

16 files changed

+331
-68
lines changed

16 files changed

+331
-68
lines changed

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
<NoWidth />
66
<PercentWidth />
77
<PxWidth />
8-
<FixedWidth />
98
<LongWord />
109
</div>
1110
</template>
@@ -14,7 +13,6 @@ import Explain from "./explain.md";
1413
import NoWidth from "./no-width.md";
1514
import PercentWidth from "./percent-width.md";
1615
import PxWidth from "./px-width.md";
17-
import FixedWidth from "./fixed-width.md";
1816
import LongWord from "./long-word.md";
1917
2018
export default {
@@ -24,7 +22,6 @@ export default {
2422
NoWidth,
2523
PercentWidth,
2624
PxWidth,
27-
FixedWidth,
2825
LongWord,
2926
},
3027
};

‎examples/src/docs/en/ve-table/table-width/calc-width.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
:::anchor Dynamic Table Width(calc css function)
2+
3+
:::demo 1、You can use [calc css function](<https://developer.mozilla.org/en-US/docs/Web/CSS/calc()>) to achieve table dynamic width<br>2、Try changing the browser width to see the effect
4+
5+
```html
6+
<template>
7+
<ve-table style="width:calc(55vw - 10px);" :columns="columns" :table-data="tableData" />
8+
</template>
9+
10+
<script>
11+
export default {
12+
data() {
13+
return {
14+
columns: [
15+
{ field: "name", key: "a", title: "Name", width: 100 },
16+
{ field: "date", key: "b", title: "Tel", width: 200 },
17+
{ field: "hobby", key: "c", title: "Hobby", width: 300 },
18+
{ field: "address", key: "d", title: "Address", width: 300 },
19+
],
20+
tableData: [
21+
{
22+
name: "John",
23+
date: "1900-05-20",
24+
hobby: "coding and coding repeat",
25+
address: "No.1 Century Avenue, Shanghai",
26+
},
27+
{
28+
name: "Dickerson",
29+
date: "1910-06-20",
30+
hobby: "coding and coding repeat",
31+
address: "No.1 Century Avenue, Beijing",
32+
},
33+
{
34+
name: "Larsen",
35+
date: "2000-07-20",
36+
hobby: "coding and coding repeat",
37+
address: "No.1 Century Avenue, Chongqing",
38+
},
39+
{
40+
name: "Geneva",
41+
date: "2010-08-20",
42+
hobby: "coding and coding repeat",
43+
address: "No.1 Century Avenue, Xiamen",
44+
},
45+
{
46+
name: "Jami",
47+
date: "2020-09-20",
48+
hobby: "coding and coding repeat",
49+
address: "No.1 Century Avenue, Shenzhen",
50+
},
51+
],
52+
};
53+
},
54+
};
55+
</script>
56+
```
57+
58+
:::

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
:::tip
2+
1、Table width can be set to a fixed value. like:`style="width:900px;"`<br>
3+
2、Table width can be set to a dynamic value. like:`style="width:calc(100vh - 210px)"` or `style="width:80%"`<br>
4+
5+
:::

‎examples/src/docs/en/ve-table/column-width/fixed-width.md‎ renamed to ‎examples/src/docs/en/ve-table/table-width/fixed-width.md‎

Lines changed: 7 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,21 @@
1-
:::anchor Fixed width of the table
1+
:::anchor Fixed Table Width
22

3-
:::demo The width of the outer container needs to be set for the fixed width of the table.You can use `style="width:900px"` mode setting. The width of the container here is 900px
3+
:::demo You can use pixel values to achieve a fixed width of the table. like `style="width:900px"`
44

55
```html
66
<template>
7-
<ve-table
8-
style="width:900px"
9-
:columns="columns"
10-
:table-data="tableData"
11-
:border-around="true"
12-
:border-x="true"
13-
:border-y="true"
14-
/>
7+
<ve-table style="width:900px;" :columns="columns" :table-data="tableData" />
158
</template>
169

1710
<script>
1811
export default {
1912
data() {
2013
return {
2114
columns: [
22-
{
23-
field: "name",
24-
key: "a",
25-
title: "Name 100px",
26-
width: 100,
27-
},
28-
{ field: "date", key: "b", title: "Tel 200px", width: 200 },
29-
{
30-
field: "hobby",
31-
key: "c",
32-
title: "Hobby 300px",
33-
width: 300,
34-
},
35-
{
36-
field: "address",
37-
key: "d",
38-
title: "Address 300px",
39-
width: 300,
40-
},
15+
{ field: "name", key: "a", title: "Name", width: 100 },
16+
{ field: "date", key: "b", title: "Tel", width: 200 },
17+
{ field: "hobby", key: "c", title: "Hobby", width: 300 },
18+
{ field: "address", key: "d", title: "Address", width: 300 },
4119
],
4220
tableData: [
4321
{

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div>
3+
<h2>Table Width</h2>
4+
<Explain />
5+
<FixedWidth />
6+
<CalcWidth />
7+
<PercentWidth />
8+
</div>
9+
</template>
10+
<script>
11+
import Explain from "./explain.md";
12+
import FixedWidth from "./fixed-width.md";
13+
import CalcWidth from "./calc-width.md";
14+
import PercentWidth from "./percent-width.md";
15+
16+
export default {
17+
name: "basic-main",
18+
components: {
19+
Explain,
20+
FixedWidth,
21+
CalcWidth,
22+
PercentWidth,
23+
},
24+
};
25+
</script>

‎examples/src/docs/en/ve-table/table-width/percent-width.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
:::anchor 表格动态宽度（百分比）
2+
3+
:::demo 1、You can use percentage values to achieve a fixed width of the table. like `style="width:80%"`<br>2、Try changing the browser width to see the effect
4+
5+
```html
6+
<template>
7+
<ve-table style="width:80%" :columns="columns" :table-data="tableData" />
8+
</template>
9+
10+
<script>
11+
export default {
12+
data() {
13+
return {
14+
columns: [
15+
{ field: "name", key: "a", title: "Name", width: 100 },
16+
{ field: "date", key: "b", title: "Tel", width: 200 },
17+
{ field: "hobby", key: "c", title: "Hobby", width: 300 },
18+
{ field: "address", key: "d", title: "Address", width: 300 },
19+
],
20+
tableData: [
21+
{
22+
name: "John",
23+
date: "1900-05-20",
24+
hobby: "coding and coding repeat",
25+
address: "No.1 Century Avenue, Shanghai",
26+
},
27+
{
28+
name: "Dickerson",
29+
date: "1910-06-20",
30+
hobby: "coding and coding repeat",
31+
address: "No.1 Century Avenue, Beijing",
32+
},
33+
{
34+
name: "Larsen",
35+
date: "2000-07-20",
36+
hobby: "coding and coding repeat",
37+
address: "No.1 Century Avenue, Chongqing",
38+
},
39+
{
40+
name: "Geneva",
41+
date: "2010-08-20",
42+
hobby: "coding and coding repeat",
43+
address: "No.1 Century Avenue, Xiamen",
44+
},
45+
{
46+
name: "Jami",
47+
date: "2020-09-20",
48+
hobby: "coding and coding repeat",
49+
address: "No.1 Century Avenue, Shenzhen",
50+
},
51+
],
52+
};
53+
},
54+
};
55+
</script>
56+
```
57+
58+
:::

‎examples/src/docs/zh/ve-table/column-width/main.vue‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
<NoWidth />
66
<PercentWidth />
77
<PxWidth />
8-
<FixedWidth />
98
<LongWord />
109
</div>
1110
</template>
@@ -14,7 +13,6 @@ import Explain from "./explain.md";
1413
import NoWidth from "./no-width.md";
1514
import PercentWidth from "./percent-width.md";
1615
import PxWidth from "./px-width.md";
17-
import FixedWidth from "./fixed-width.md";
1816
import LongWord from "./long-word.md";
1917
2018
export default {
@@ -24,7 +22,6 @@ export default {
2422
NoWidth,
2523
PercentWidth,
2624
PxWidth,
27-
FixedWidth,
2825
LongWord,
2926
},
3027
};

‎examples/src/docs/zh/ve-table/table-height/fixed-height.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
:::anchor 表格宽度固定
1+
:::anchor 表格高度固定
22

3-
:::demo 表格的固定宽度，需要设置外层容器宽度。可以通过`style="width:900px"`方式设置。此处容器宽度为 900px
3+
:::demo
44

55
```html
66
<template>
77
<ve-table
8-
style="width:900px"
8+
style="width:900px;height:1000px;"
99
:columns="columns"
1010
:table-data="tableData"
1111
:border-around="true"

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22
<div>
33
<h2>列宽设置</h2>
44
<Explain />
5-
<NoWidth />
5+
<FixedHeight />
66
</div>
77
</template>
88
<script>
99
import Explain from "./explain.md";
10-
import NoWidth from "./no-width.md";
10+
import FixedHeight from "./fixed-height.md";
1111
1212
export default {
1313
name: "basic-main",
1414
components: {
1515
Explain,
16-
NoWidth,
16+
FixedHeight,
1717
},
1818
};
1919
</script>

‎examples/src/docs/zh/ve-table/table-width/calc-width.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
:::anchor 表格动态宽度（calc css 函数）
2+
3+
:::demo 1、你可以使用 [calc css 函数](<https://developer.mozilla.org/en-US/docs/Web/CSS/calc()>) 实现表格动态宽度<br>2、试试改变浏览器宽度查看效果
4+
5+
```html
6+
<template>
7+
<ve-table style="width:calc(55vw - 10px);" :columns="columns" :table-data="tableData" />
8+
</template>
9+
10+
<script>
11+
export default {
12+
data() {
13+
return {
14+
columns: [
15+
{ field: "name", key: "a", title: "Name", width: 100 },
16+
{ field: "date", key: "b", title: "Tel", width: 200 },
17+
{ field: "hobby", key: "c", title: "Hobby", width: 300 },
18+
{ field: "address", key: "d", title: "Address", width: 300 },
19+
],
20+
tableData: [
21+
{
22+
name: "John",
23+
date: "1900-05-20",
24+
hobby: "coding and coding repeat",
25+
address: "No.1 Century Avenue, Shanghai",
26+
},
27+
{
28+
name: "Dickerson",
29+
date: "1910-06-20",
30+
hobby: "coding and coding repeat",
31+
address: "No.1 Century Avenue, Beijing",
32+
},
33+
{
34+
name: "Larsen",
35+
date: "2000-07-20",
36+
hobby: "coding and coding repeat",
37+
address: "No.1 Century Avenue, Chongqing",
38+
},
39+
{
40+
name: "Geneva",
41+
date: "2010-08-20",
42+
hobby: "coding and coding repeat",
43+
address: "No.1 Century Avenue, Xiamen",
44+
},
45+
{
46+
name: "Jami",
47+
date: "2020-09-20",
48+
hobby: "coding and coding repeat",
49+
address: "No.1 Century Avenue, Shenzhen",
50+
},
51+
],
52+
};
53+
},
54+
};
55+
</script>
56+
```
57+
58+
:::

0 commit comments

Comments
 (0)