Skip to content

Commit db819ff

Browse files
huangshuweihuangshuwei
committed
添加超长文本示例
1 parent 71b67c2 commit db819ff

File tree

5 files changed

+183
-3
lines changed

5 files changed

+183
-3
lines changed

‎examples/src/docs/en/ve-table/column-width/long-word.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
:::anchor Long text destroys layout
2+
3+
:::demo 1、Too much text in a cell destroys the layout,This can be controlled by style [word-break](https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break) <br>2、You can also use it with [Cell Ellipsis](#/zh/doc/table/cell-ellipsis)
4+
5+
```html
6+
<template>
7+
<div>
8+
word-break：
9+
<el-radio-group size="small" v-model="wordBreak">
10+
<el-radio-button label="normal">normal</el-radio-button>
11+
<el-radio-button label="keep-all">keep-all</el-radio-button>
12+
<el-radio-button label="break-all">break-all</el-radio-button>
13+
<el-radio-button label="break-word">break-word</el-radio-button>
14+
</el-radio-group>
15+
<br /><br />
16+
<ve-table
17+
:style="{'word-break':wordBreak}"
18+
:columns="columns"
19+
:table-data="tableData"
20+
:border-around="true"
21+
:border-x="true"
22+
:border-y="true"
23+
/>
24+
</div>
25+
</template>
26+
27+
<script>
28+
export default {
29+
data() {
30+
return {
31+
wordBreak: "normal",
32+
columns: [
33+
{ field: "name", key: "a", title: "Name 40%", width: "40%" },
34+
{ field: "date", key: "b", title: "Tel 20%", width: "20%" },
35+
{
36+
field: "hobby",
37+
key: "c",
38+
title: "Hobby 20%",
39+
width: "20%",
40+
/* ellipsis: {
41+
showTitle: true,
42+
lineClamp: 5,
43+
}, */
44+
},
45+
{ field: "address", key: "d", title: "Address 20%", width: "20%" },
46+
],
47+
tableData: [
48+
{
49+
name: "John",
50+
date: "1900-05-20",
51+
hobby:
52+
"Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 大江东去浪淘尽千古风流人物故垒西边人道是三国周郎赤壁乱石穿空惊涛拍岸卷起千堆雪江山如画一时多少豪杰",
53+
address: "No.1 Century Avenue, Xiamen",
54+
},
55+
{
56+
name: "Dickerson",
57+
date: "1910-06-20",
58+
hobby: "coding and coding repeat",
59+
address: "No.1 Century Avenue, Beijing",
60+
},
61+
{
62+
name: "Larsen",
63+
date: "2000-07-20",
64+
hobby: "coding and coding repeat",
65+
address: "No.1 Century Avenue, Chongqing",
66+
},
67+
{
68+
name: "Geneva",
69+
date: "2010-08-20",
70+
hobby: "coding and coding repeat",
71+
address: "No.1 Century Avenue, Xiamen",
72+
},
73+
{
74+
name: "Jami",
75+
date: "2020-09-20",
76+
hobby: "coding and coding repeat",
77+
address: "No.1 Century Avenue, Shenzhen",
78+
},
79+
],
80+
};
81+
},
82+
};
83+
</script>
84+
```
85+
86+
:::

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<PercentWidth />
77
<PxWidth />
88
<FixedWidth />
9+
<LongWord />
910
</div>
1011
</template>
1112
<script>
@@ -14,6 +15,7 @@ import NoWidth from "./no-width.md";
1415
import PercentWidth from "./percent-width.md";
1516
import PxWidth from "./px-width.md";
1617
import FixedWidth from "./fixed-width.md";
18+
import LongWord from "./long-word.md";
1719
1820
export default {
1921
name: "basic-main",
@@ -22,7 +24,8 @@ export default {
2224
NoWidth,
2325
PercentWidth,
2426
PxWidth,
25-
FixedWidth
27+
FixedWidth,
28+
LongWord
2629
}
2730
};
2831
</script>

‎examples/src/docs/zh/ve-table/column-width/long-word.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
:::anchor 长文本破坏布局
2+
3+
:::demo 1、当单元格文本内容过多时会破坏布局，此时可以通过样式 [word-break](https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break) 控制<br>2、你也可以结合[单元格省略](#/zh/doc/table/cell-ellipsis)功能一起使用
4+
5+
```html
6+
<template>
7+
<div>
8+
word-break：
9+
<el-radio-group size="small" v-model="wordBreak">
10+
<el-radio-button label="normal">normal</el-radio-button>
11+
<el-radio-button label="keep-all">keep-all</el-radio-button>
12+
<el-radio-button label="break-all">break-all</el-radio-button>
13+
<el-radio-button label="break-word">break-word</el-radio-button>
14+
</el-radio-group>
15+
<br /><br />
16+
<ve-table
17+
:style="{'word-break':wordBreak}"
18+
:columns="columns"
19+
:table-data="tableData"
20+
:border-around="true"
21+
:border-x="true"
22+
:border-y="true"
23+
/>
24+
</div>
25+
</template>
26+
27+
<script>
28+
export default {
29+
data() {
30+
return {
31+
wordBreak: "normal",
32+
columns: [
33+
{ field: "name", key: "a", title: "Name 40%", width: "40%" },
34+
{ field: "date", key: "b", title: "Tel 20%", width: "20%" },
35+
{
36+
field: "hobby",
37+
key: "c",
38+
title: "Hobby 20%",
39+
width: "20%",
40+
/* ellipsis: {
41+
showTitle: true,
42+
lineClamp: 5,
43+
}, */
44+
},
45+
{ field: "address", key: "d", title: "Address 20%", width: "20%" },
46+
],
47+
tableData: [
48+
{
49+
name: "John",
50+
date: "1900-05-20",
51+
hobby:
52+
"Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 大江东去浪淘尽千古风流人物故垒西边人道是三国周郎赤壁乱石穿空惊涛拍岸卷起千堆雪江山如画一时多少豪杰",
53+
address: "No.1 Century Avenue, Xiamen",
54+
},
55+
{
56+
name: "Dickerson",
57+
date: "1910-06-20",
58+
hobby: "coding and coding repeat",
59+
address: "No.1 Century Avenue, Beijing",
60+
},
61+
{
62+
name: "Larsen",
63+
date: "2000-07-20",
64+
hobby: "coding and coding repeat",
65+
address: "No.1 Century Avenue, Chongqing",
66+
},
67+
{
68+
name: "Geneva",
69+
date: "2010-08-20",
70+
hobby: "coding and coding repeat",
71+
address: "No.1 Century Avenue, Xiamen",
72+
},
73+
{
74+
name: "Jami",
75+
date: "2020-09-20",
76+
hobby: "coding and coding repeat",
77+
address: "No.1 Century Avenue, Shenzhen",
78+
},
79+
],
80+
};
81+
},
82+
};
83+
</script>
84+
```
85+
86+
:::

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<PercentWidth />
77
<PxWidth />
88
<FixedWidth />
9+
<LongWord />
910
</div>
1011
</template>
1112
<script>
@@ -14,6 +15,7 @@ import NoWidth from "./no-width.md";
1415
import PercentWidth from "./percent-width.md";
1516
import PxWidth from "./px-width.md";
1617
import FixedWidth from "./fixed-width.md";
18+
import LongWord from "./long-word.md";
1719
1820
export default {
1921
name: "basic-main",
@@ -22,7 +24,8 @@ export default {
2224
NoWidth,
2325
PercentWidth,
2426
PxWidth,
25-
FixedWidth
27+
FixedWidth,
28+
LongWord
2629
}
2730
};
2831
</script>

‎examples/src/main.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,12 @@ Vue.component("demo-block", DemoBlock);
2424
Vue.component("anchor", Anchor);
2525

2626
// 仅用作示例
27-
import { Switch, Row, Col } from "element-ui";
27+
import { Switch, Row, Col, RadioButton, RadioGroup } from "element-ui";
2828
Vue.use(Switch);
2929
Vue.use(Row);
3030
Vue.use(Col);
31+
Vue.use(RadioButton);
32+
Vue.use(RadioGroup);
3133

3234
// vue-lazy-container
3335
import VueLazyContainer from "vue-lazy-container";

0 commit comments

Comments
 (0)