Skip to content

Commit d4b1a34

Browse files
author
huangshuwei
committed
update demo
1 parent cf66a13 commit d4b1a34

File tree

4 files changed

+198
-47
lines changed

4 files changed

+198
-47
lines changed

‎examples/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"echarts": "^4.9.0",
1616
"highlight.js": "^10.5.0",
1717
"js-cookie": "^2.2.1",
18+
"mockjs": "^1.1.0",
1819
"nprogress": "^0.2.0",
1920
"regenerator-runtime": "^0.13.7",
2021
"vue-router": "^3.2.0",

‎examples/public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<link
1414
rel="stylesheet"
1515
type="text/css"
16-
href="//at.alicdn.com/t/font_2012535_ecsmgevfixg.css"
16+
href="//at.alicdn.com/t/font_2012535_jd48jo96o3r.css"
1717
/>
1818
</head>
1919

‎examples/src/demo/index.vue‎

Lines changed: 184 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
<template>
22
<div>
3-
<div class="site-demo">
3+
<div class="site-demo-container">
44
<ve-table
55
fixed-header
66
border-y
7-
:max-height="500"
8-
:scroll-width="1600"
7+
:max-height="600"
8+
:scroll-width="2000"
99
:virtual-scroll-option="virtualScrollOption"
1010
:columns="columns"
1111
:table-data="tableData"
1212
row-key-field-name="rowKey"
13+
:cell-style-option="cellStyleOption"
1314
/>
1415
</div>
1516
<!-- <Footer /> -->
@@ -18,81 +19,175 @@
1819

1920
<script>
2021
/* import Footer from "@/comp/layout/footer.vue"; */
22+
import Mock from "mockjs";
2123
export default {
2224
components: {
2325
/* Footer */
2426
},
2527
data() {
2628
return {
29+
cellStyleOption: {
30+
bodyCellClass: ({ row, column, rowIndex }) => {
31+
if (column.field === "proficiency") {
32+
return "table-body-cell-proficiency";
33+
}
34+
}
35+
},
2736
virtualScrollOption: {
2837
// 是否开启
2938
enable: true
3039
},
3140
columns: [
3241
{
33-
field: "col1",
42+
field: "rowIndex",
3443
key: "a",
35-
title: "col1",
44+
title: "#",
3645
width: 50,
3746
fixed: "left"
3847
},
3948
{
40-
title: "col2-col3",
49+
title: "Basic Info",
4150
fixed: "left",
4251
children: [
4352
{
44-
field: "col2",
53+
field: "name",
4554
key: "b",
46-
title: "col2",
47-
width: 50
55+
title: "Name",
56+
width: 100,
57+
align: "left"
4858
},
4959
{
50-
field: "col3",
60+
field: "sex",
5161
key: "c",
52-
title: "col3",
53-
width: 50
62+
title: "Sex",
63+
width: 50,
64+
align: "center",
65+
renderBodyCell: ({ row, column, rowIndex }, h) => {
66+
const cellData = row[column.field];
67+
68+
let iconName =
69+
cellData === 1
70+
? "icon-male"
71+
: "icon-female";
72+
73+
return (
74+
<i
75+
style="font-size:20px;color:#666;"
76+
class={"iconfont " + iconName}
77+
/>
78+
);
79+
}
5480
}
5581
]
5682
},
5783
{
58-
title: "col4-col5-col6",
84+
title: "Personal Experience",
85+
align: "center",
5986
children: [
6087
{
61-
title: "col4-col5",
88+
title: "Profession",
89+
field: "profession",
90+
key: "d",
91+
width: 100,
92+
align: "left"
93+
},
94+
{
95+
title: "IT Skills",
6296
children: [
6397
{
64-
field: "col4",
65-
key: "d",
66-
title: "col4",
67-
width: 130
98+
field: "proficiency",
99+
key: "e",
100+
title: "Proficiency",
101+
width: 150,
102+
renderBodyCell: (
103+
{ row, column, rowIndex },
104+
h
105+
) => {
106+
const cellData = row[column.field];
107+
108+
const colorClass =
109+
cellData > 60
110+
? "demo-blue"
111+
: cellData > 30
112+
? "demo-orange"
113+
: "demo-red";
114+
115+
return (
116+
<div class="proficiency-span-container">
117+
<span
118+
class={
119+
"proficiency-span " +
120+
colorClass
121+
}
122+
style={
123+
"width:" +
124+
cellData +
125+
"%;"
126+
}
127+
>
128+
{cellData}%
129+
</span>
130+
</div>
131+
);
132+
}
68133
},
69134
{
70-
field: "col5",
71-
key: "e",
72-
title: "col5",
73-
width: 140
135+
field: "skills",
136+
key: "f",
137+
title: "Skills",
138+
width: 150,
139+
align: "left",
140+
renderBodyCell: (
141+
{ row, column, rowIndex },
142+
h
143+
) => {
144+
const cellData = row[column.field];
145+
146+
const LANGS = [
147+
{
148+
name: "Javascript",
149+
color: "#48a4ef"
150+
},
151+
{
152+
name: "Python",
153+
color: "#d8899c"
154+
},
155+
{ name: "java", color: "#a88cd9" },
156+
{ name: "C++", color: "#88d317" }
157+
];
158+
159+
const skills = LANGS.slice(0, cellData);
160+
161+
return skills.map(skill => {
162+
return (
163+
<span
164+
class="skill-span"
165+
style={
166+
"background-color:" +
167+
skill.color
168+
}
169+
>
170+
{skill.name}
171+
</span>
172+
);
173+
});
174+
}
74175
}
75176
]
76-
},
77-
{
78-
title: "col6",
79-
field: "col6",
80-
key: "f",
81-
width: 140
82177
}
83178
]
84179
},
85180
{
86-
field: "col7",
181+
field: "address",
87182
key: "g",
88-
title: "col7",
89-
width: 50,
90-
fixed: "right"
183+
title: "Address",
184+
width: 250,
185+
align: "left"
91186
},
92187
{
93-
field: "col8",
188+
field: "zip",
94189
key: "h",
95-
title: "col8",
190+
title: "Zip",
96191
width: 50,
97192
fixed: "right"
98193
}
@@ -105,20 +200,27 @@ export default {
105200
return Math.floor(Math.random() * (max - min) + min);
106201
},
107202
initData() {
203+
const PROFESSIONS = [
204+
"Project Manager",
205+
"User Interface Designer",
206+
"Front-End Developer",
207+
"Testor",
208+
"Product Designer",
209+
"System Designer"
210+
];
211+
108212
let data = [];
109213
for (let i = 0; i < 10000; i++) {
110214
data.push({
111215
rowKey: i,
112-
col1: i,
113-
col2: i,
114-
col3: i,
115-
col4: i,
116-
col5: i,
117-
col6: i,
118-
col7: i,
119-
col8: i,
120-
col9: i,
121-
col10: i
216+
rowIndex: i + 1,
217+
name: Mock.Random.name(),
218+
sex: Mock.Random.boolean() ? 1 : 2,
219+
profession: PROFESSIONS[Mock.Random.natural(0, 5)],
220+
proficiency: Mock.Random.natural(5, 85),
221+
skills: Mock.Random.natural(0, 4),
222+
address: Mock.Random.county(true),
223+
zip: Mock.Random.zip()
122224
});
123225
}
124226
@@ -130,10 +232,46 @@ export default {
130232
}
131233
};
132234
</script>
133-
<style lang="less" scoped>
134-
.site-demo {
235+
<style lang="less">
236+
.site-demo-container {
135237
background: #fff;
136238
margin-top: 62px;
137239
padding: 10px;
240+
241+
// proficiency filed custom cell style
242+
.table-body-cell-proficiency {
243+
padding: 0 !important;
244+
}
245+
// proficiency filed
246+
.proficiency-span-container {
247+
height: 100%;
248+
text-align: left;
249+
.proficiency-span {
250+
height: 100%;
251+
display: inline-flex;
252+
align-items: center;
253+
padding-left: 10px;
254+
font-weight: bold;
255+
color: #555;
256+
257+
&.demo-blue {
258+
background-color: RGBA(24, 144, 255, 0.7);
259+
}
260+
&.demo-orange {
261+
background-color: RGBA(255, 179, 0, 0.7);
262+
}
263+
&.demo-red {
264+
background-color: RGBA(244, 93, 81, 0.7);
265+
}
266+
}
267+
}
268+
269+
// skills
270+
.skill-span {
271+
display: inline-block;
272+
margin-right: 5px;
273+
padding: 3px 8px;
274+
color: #333;
275+
}
138276
}
139277
</style>

‎examples/yarn.lock‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3029,6 +3029,11 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
30293029
dependencies:
30303030
delayed-stream "~1.0.0"
30313031

3032+
commander@*:
3033+
version "7.0.0"
3034+
resolved "https://registry.npm.taobao.org/commander/download/commander-7.0.0.tgz?cache=0&sync_timestamp=1610702173050&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-7.0.0.tgz#3e2bbfd8bb6724760980988fb5b22b7ee6b71ab2"
3035+
integrity sha1-Piu/2LtnJHYJgJiPtbIrfua3GrI=
3036+
30323037
[email protected]:
30333038
version "2.17.1"
30343039
resolved "https://registry.npm.taobao.org/commander/download/commander-2.17.1.tgz?cache=0&sync_timestamp=1598576076977&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
@@ -7247,6 +7252,13 @@ mkdirp@^1.0.4:
72477252
resolved "https://registry.npm.taobao.org/mkdirp/download/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
72487253
integrity sha1-PrXtYmInVteaXw4qIh3+utdcL34=
72497254

7255+
mockjs@^1.1.0:
7256+
version "1.1.0"
7257+
resolved "https://registry.npm.taobao.org/mockjs/download/mockjs-1.1.0.tgz#e6a0c378e91906dbaff20911cc0273b3c7d75b06"
7258+
integrity sha1-5qDDeOkZBtuv8gkRzAJzs8fXWwY=
7259+
dependencies:
7260+
commander "*"
7261+
72507262
move-concurrently@^1.0.1:
72517263
version "1.0.1"
72527264
resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"

0 commit comments

Comments
 (0)