Skip to content

Commit 1bc21a7

Browse files
huangshuweihuangshuwei
committed
refine doc
1 parent 089924d commit 1bc21a7

File tree

3 files changed

+227
-3
lines changed

3 files changed

+227
-3
lines changed

‎examples/src/demo/index.vue‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,30 @@
11
<template>
22
<div>
33
<div class="site-demo-container">
4+
<div class="demo-title">
5+
<div class="demo-title-text">
6+
This is a simple data table display.
7+
</div>
8+
</div>
49
<NormalDataGrid />
10+
<div class="demo-title last">
11+
<div class="demo-title-text">
12+
Of course, you can also use it like Excel or Google Sheets .
13+
</div>
14+
</div>
15+
<Spreadsheet />
516
</div>
617
</div>
718
</template>
819

920
<script>
1021
import NormalDataGrid from "./normal-data-grid.vue";
22+
import Spreadsheet from "./spreadsheet.vue";
1123
export default {
1224
name: "demo",
1325
components: {
1426
NormalDataGrid,
27+
Spreadsheet,
1528
},
1629
data() {
1730
return {};
@@ -24,6 +37,27 @@ export default {
2437
flex-direction: column;
2538
background: #fff;
2639
margin-top: 62px;
27-
padding: 10px;
40+
padding: 10px 0;
41+
42+
.demo-title {
43+
display: flex;
44+
height: 80px;
45+
align-items: center;
46+
// background: #1890ffb3;
47+
font-size: 30px;
48+
padding: 0 100px;
49+
font-weight: bold;
50+
color: #40a0ffc1;
51+
52+
.demo-title-text {
53+
border-bottom: double 2px;
54+
display: inline;
55+
padding: 8px;
56+
}
57+
58+
&.last {
59+
margin-top: 50px;
60+
}
61+
}
2862
}
2963
</style>

‎examples/src/demo/normal-data-grid.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
ref="tableRef"
8383
fixed-header
8484
border-y
85-
max-height="calc(100vh - 160px)"
85+
:max-height="500"
8686
:scroll-width="tableScrollWdith"
8787
:sort-option="sortOption"
8888
:virtual-scroll-option="virtualScrollOption"
@@ -597,6 +597,8 @@ export default {
597597
</script>
598598
<style lang="less">
599599
.normal-data-grid {
600+
margin: 10px 0;
601+
padding: 0 100px;
600602
.operation {
601603
margin: 10px 0;
602604

‎examples/src/demo/spreadsheet.vue‎

Lines changed: 189 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,191 @@
11
<template>
2-
<div>11</div>
2+
<div class="spreadsheet">
3+
<ve-table
4+
style="word-break: break-word"
5+
fixed-header
6+
:scroll-width="2000"
7+
:max-height="500"
8+
border-y
9+
:columns="columns"
10+
:table-data="tableData"
11+
row-key-field-name="rowKey"
12+
:virtual-scroll-option="virtualScrollOption"
13+
:cell-autofill-option="cellAutofillOption"
14+
:edit-option="editOption"
15+
:contextmenu-body-option="contextmenuBodyOption"
16+
/>
17+
</div>
318
</template>
19+
20+
<script>
21+
const COLUMN_KEYS = [
22+
"A",
23+
"B",
24+
"C",
25+
"D",
26+
"E",
27+
"F",
28+
"G",
29+
"H",
30+
"I",
31+
"J",
32+
"K",
33+
"L",
34+
"M",
35+
"N",
36+
"O",
37+
"P",
38+
"Q",
39+
"R",
40+
"S",
41+
"T",
42+
"U",
43+
"V",
44+
"W",
45+
"X",
46+
"Y",
47+
"Z",
48+
];
49+
export default {
50+
data() {
51+
return {
52+
// start row index
53+
startRowIndex: 0,
54+
virtualScrollOption: {
55+
// 是否开启
56+
enable: true,
57+
scrolling: this.scrolling,
58+
},
59+
cellAutofillOption: {
60+
directionX: true,
61+
directionY: true,
62+
beforeAutofill: ({
63+
direction,
64+
sourceSelectionRangeIndexes,
65+
targetSelectionRangeIndexes,
66+
sourceSelectionData,
67+
targetSelectionData,
68+
}) => {},
69+
afterAutofill: ({
70+
direction,
71+
sourceSelectionRangeIndexes,
72+
targetSelectionRangeIndexes,
73+
sourceSelectionData,
74+
targetSelectionData,
75+
}) => {},
76+
},
77+
// edit option 可控单元格编辑
78+
editOption: {
79+
beforeCellValueChange: ({ row, column, changeValue }) => {},
80+
afterCellValueChange: ({ row, column, changeValue }) => {},
81+
},
82+
contextmenuBodyOption: {
83+
// callback for all options
84+
callback: ({ type, selection }) => {},
85+
86+
// contextmenus
87+
contextmenus: [
88+
{
89+
type: "INSERT_ROW_ABOVE",
90+
},
91+
{
92+
type: "INSERT_ROW_BELOW",
93+
},
94+
{
95+
type: "SEPARATOR",
96+
},
97+
{
98+
type: "REMOVE_ROW",
99+
},
100+
{
101+
type: "SEPARATOR",
102+
},
103+
{
104+
type: "HIDE_COLUMN",
105+
},
106+
],
107+
},
108+
tableData: [],
109+
};
110+
},
111+
computed: {
112+
columns() {
113+
let columns = [
114+
{
115+
field: "index",
116+
key: "index",
117+
// is operation column
118+
operationColumn: true,
119+
title: "#",
120+
width: 30,
121+
fixed: "left",
122+
renderBodyCell: this.renderRowIndex,
123+
},
124+
];
125+
columns = columns.concat(
126+
COLUMN_KEYS.map((keyValue) => {
127+
return {
128+
title: keyValue,
129+
field: keyValue,
130+
key: keyValue,
131+
width: 50,
132+
edit: true,
133+
};
134+
}),
135+
);
136+
137+
return columns;
138+
},
139+
},
140+
methods: {
141+
// render row index
142+
renderRowIndex({ row, column, rowIndex }) {
143+
return <span>{rowIndex + this.startRowIndex + 1}</span>;
144+
},
145+
scrolling({
146+
startRowIndex,
147+
visibleStartIndex,
148+
visibleEndIndex,
149+
visibleAboveCount,
150+
visibleBelowCount,
151+
}) {
152+
this.startRowIndex = startRowIndex;
153+
},
154+
initTableData() {
155+
let tableData = [];
156+
for (let i = 0; i < 100; i++) {
157+
let dataItem = {
158+
rowKey: i,
159+
};
160+
161+
COLUMN_KEYS.forEach((keyValue) => {
162+
dataItem[keyValue] = "";
163+
});
164+
165+
if (i === 1 || i === 3) {
166+
dataItem["C"] = "YOU";
167+
dataItem["D"] = "CAN";
168+
dataItem["E"] = "TRY";
169+
dataItem["F"] = "ENTER";
170+
dataItem["G"] = "SOMET";
171+
dataItem["G"] = "WORD";
172+
dataItem["H"] = "!!!";
173+
}
174+
175+
tableData.push(dataItem);
176+
}
177+
178+
this.tableData = tableData;
179+
},
180+
},
181+
created() {
182+
this.initTableData();
183+
},
184+
};
185+
</script>
186+
<style lang="less">
187+
.spreadsheet {
188+
padding: 0 100px;
189+
margin: 30px 0;
190+
}
191+
</style>

0 commit comments

Comments
 (0)