Skip to content

Commit a8d08dc

Browse files
huangshuweihuangshuwei
committed
refine demos
1 parent 352b927 commit a8d08dc

File tree

2 files changed

+89
-85
lines changed

2 files changed

+89
-85
lines changed

‎examples/src/demo/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export default {
5050
5151
.demo-title {
5252
display: flex;
53-
height: 80px;
53+
height: 60px;
5454
align-items: center;
5555
// background: #1890ffb3;
5656
font-size: 30px;
@@ -65,7 +65,7 @@ export default {
6565
}
6666
6767
&.last {
68-
margin-top: 50px;
68+
margin-top: 40px;
6969
}
7070
}
7171
}

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

Lines changed: 87 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -2,79 +2,62 @@
22
<div class="normal-data-grid">
33
<div class="operation">
44
<div class="operation-item">
5-
<el-row :gutter="20">
6-
<el-col :span="4">
7-
{{ currentLocal["dataRows"] }}
8-
<el-select
9-
v-model="dataRow"
10-
style="width: 60%"
11-
size="small"
12-
@change="dataRowChange"
13-
>
14-
<el-option
15-
v-for="item in currentLocal['dataRowsOption']"
16-
:key="item.value"
17-
:label="item.label"
18-
:value="item.value"
19-
></el-option>
20-
</el-select>
21-
</el-col>
22-
<el-col :span="3">
23-
{{ currentLocal["columnFixed"] }}
24-
<el-switch
25-
v-model="enableColumnFixed"
26-
:active-color="switchActiveColor"
27-
:inactive-color="switchInactiveColor"
28-
></el-switch>
29-
</el-col>
30-
<el-col :span="3">
31-
{{ currentLocal["expand"] }}
32-
<el-switch
33-
v-model="enableExpand"
34-
:active-color="switchActiveColor"
35-
:inactive-color="switchInactiveColor"
36-
></el-switch>
37-
</el-col>
38-
<el-col :span="3">
39-
{{ currentLocal["loading"] }}
40-
<el-switch
41-
v-model="enableLoading"
42-
:active-color="switchActiveColor"
43-
:inactive-color="switchInactiveColor"
44-
@change="switchLoading"
45-
></el-switch>
46-
</el-col>
47-
<el-col :span="3">
48-
{{ currentLocal["radio"] }}
49-
<el-switch
50-
v-model="enableRowRadio"
51-
:active-color="switchActiveColor"
52-
:inactive-color="switchInactiveColor"
53-
></el-switch>
54-
</el-col>
55-
<el-col :span="3">
56-
{{ currentLocal["checkbox"] }}
57-
<el-switch
58-
v-model="enableRowCheckbox"
59-
:active-color="switchActiveColor"
60-
:inactive-color="switchInactiveColor"
61-
></el-switch>
62-
</el-col>
63-
<el-col :span="2"></el-col>
64-
</el-row>
5+
{{ currentLocal["dataRows"] }}
6+
<el-select
7+
v-model="dataRow"
8+
style="width: 60%"
9+
size="small"
10+
@change="dataRowChange"
11+
>
12+
<el-option
13+
v-for="item in currentLocal['dataRowsOption']"
14+
:key="item.value"
15+
:label="item.label"
16+
:value="item.value"
17+
></el-option>
18+
</el-select>
19+
</div>
20+
<div class="operation-item">
21+
{{ currentLocal["columnFixed"] }}
22+
<el-switch
23+
v-model="enableColumnFixed"
24+
:active-color="switchActiveColor"
25+
:inactive-color="switchInactiveColor"
26+
></el-switch>
27+
</div>
28+
<div class="operation-item">
29+
{{ currentLocal["expand"] }}
30+
<el-switch
31+
v-model="enableExpand"
32+
:active-color="switchActiveColor"
33+
:inactive-color="switchInactiveColor"
34+
></el-switch>
35+
</div>
36+
<div class="operation-item">
37+
{{ currentLocal["loading"] }}
38+
<el-switch
39+
v-model="enableLoading"
40+
:active-color="switchActiveColor"
41+
:inactive-color="switchInactiveColor"
42+
@change="switchLoading"
43+
></el-switch>
44+
</div>
45+
<div class="operation-item">
46+
{{ currentLocal["radio"] }}
47+
<el-switch
48+
v-model="enableRowRadio"
49+
:active-color="switchActiveColor"
50+
:inactive-color="switchInactiveColor"
51+
></el-switch>
52+
</div>
53+
<div class="operation-item">
54+
{{ currentLocal["checkbox"] }}
55+
<el-switch
56+
v-model="enableRowCheckbox"
57+
:active-color="switchActiveColor"
58+
:inactive-color="switchInactiveColor"
59+
></el-switch>
6560
</div>
66-
<!-- <div class="operation-item">
67-
<el-row :gutter="20">
68-
<el-col :span="3"></el-col>
69-
<el-col :span="3"></el-col>
70-
<el-col :span="3"></el-col>
71-
<el-col :span="3"></el-col>
72-
<el-col :span="3"></el-col>
73-
<el-col :span="3"></el-col>
74-
<el-col :span="3"></el-col>
75-
<el-col :span="3"></el-col>
76-
</el-row>
77-
</div> -->
7861
</div>
7962
<div class="table-list">
8063
<ve-table
@@ -94,6 +77,7 @@
9477
:radio-option="radioOption"
9578
:checkbox-option="checkboxOption"
9679
:row-style-option="rowStyleOption"
80+
:cell-selection-option="cellSelectionOption"
9781
/>
9882
</div>
9983
</div>
@@ -112,6 +96,10 @@ export default {
11296
mixins: [I18nMixins],
11397
data() {
11498
return {
99+
cellSelectionOption: {
100+
// disble cell selection
101+
enable: false,
102+
},
115103
// edit option 可控单元格编辑
116104
editOption: {
117105
// cell value change
@@ -150,6 +138,8 @@ export default {
150138
},
151139
rowStyleOption: {
152140
stripe: true,
141+
clickHighlight: true,
142+
hoverHighlight: true,
153143
},
154144
sortOption: {
155145
sortChange: (params) => {
@@ -210,7 +200,17 @@ export default {
210200
211201
// columns
212202
columns() {
213-
let columns = [];
203+
let columns = [
204+
{
205+
field: "rowIndex",
206+
key: "rowIndex",
207+
title: "#",
208+
width: 50,
209+
fixed: this.enableColumnFixed ? "left" : "",
210+
operationColumn: true,
211+
renderBodyCell: this.renderRowIndex,
212+
},
213+
];
214214
215215
if (this.enableRowRadio) {
216216
columns.push({
@@ -245,14 +245,14 @@ export default {
245245
});
246246
}
247247
248-
columns.push({
249-
field: "rowIndex",
250-
key: "rowIndex",
251-
title: "#",
252-
width: 100,
253-
fixed: this.enableColumnFixed ? "left" : "",
254-
renderBodyCell: this.renderRowIndex,
255-
});
248+
// columns.push({
249+
// field: "rowIndex",
250+
// key: "rowIndex",
251+
// title: "#",
252+
// width: 100,
253+
// fixed: this.enableColumnFixed ? "left" : "",
254+
// renderBodyCell: this.renderRowIndex,
255+
// });
256256
257257
columns = columns.concat([
258258
{
@@ -600,11 +600,15 @@ export default {
600600
margin: 10px 0;
601601
padding: 0 100px;
602602
.operation {
603+
display: flex;
604+
flex-direction: row;
605+
justify-content: space-between;
603606
margin: 10px 0;
604-
605607
.operation-item {
608+
display: flex;
609+
flex-direction: row;
606610
height: 50px;
607-
line-height: 50px;
611+
align-items: center;
608612
}
609613
}
610614

0 commit comments

Comments
 (0)