@leevan/jtui 2.0.4 → 2.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/examples/assets/icon/iconfont.css +532 -7
- package/examples/assets/icon/iconfont.eot +0 -0
- package/examples/assets/icon/iconfont.svg +1083 -1230
- package/examples/assets/icon/iconfont.ttf +0 -0
- package/examples/assets/icon/iconfont.woff +0 -0
- package/examples/assets/icon/iconfont.woff2 +0 -0
- package/examples/tableTest/tree-table.vue +1 -4
- package/lib/jtui.common.js +281 -139
- package/lib/jtui.css +1 -1
- package/lib/jtui.umd.js +281 -139
- package/lib/jtui.umd.min.js +1 -1
- package/package.json +1 -1
- package/packages/jt-table/components/tableColumn.vue +119 -0
- package/packages/jt-table/index.vue +70 -64
- package/packages/jt-table-pc/JtTablePc.vue +31 -39
- package/packages/jt-table-pc/components/tableColumn.vue +118 -0
- package/packages/jt-table-pc/data2.js +1843 -1791
package/package.json
CHANGED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
<!-- 后台数据列 -->
|
|
2
|
+
<template>
|
|
3
|
+
<!-- <template v-for="(item,index) in data.retjson.header"> -->
|
|
4
|
+
<vxe-colgroup
|
|
5
|
+
v-if="item.children && item.children.length"
|
|
6
|
+
:title="item.label"
|
|
7
|
+
:key="index"
|
|
8
|
+
>
|
|
9
|
+
<template v-for="(subItem, subIndex) in item.children">
|
|
10
|
+
<vxe-colgroup
|
|
11
|
+
v-if="subItem.children && subItem.children.length"
|
|
12
|
+
:title="subItem.label"
|
|
13
|
+
:key="subIndex"
|
|
14
|
+
>
|
|
15
|
+
<vxe-table-column
|
|
16
|
+
v-for="(subSubItem, subSubIndex) in subItem.children"
|
|
17
|
+
:edit-render="subSubItem.edit"
|
|
18
|
+
:key="subSubIndex"
|
|
19
|
+
show-overflow
|
|
20
|
+
:field="subSubItem.prop"
|
|
21
|
+
:align="subSubItem.align"
|
|
22
|
+
:title="subSubItem.label"
|
|
23
|
+
:type="subSubItem.html ? 'html' : ''"
|
|
24
|
+
:min-width="subSubItem.width"
|
|
25
|
+
:sortable="subSubItem.isSort"
|
|
26
|
+
:visible="subSubItem.width != 0"
|
|
27
|
+
:fixed="subSubItem.isFixed"
|
|
28
|
+
:filters="filterData(subSubItem.filterRender)"
|
|
29
|
+
:filter-render="{ name: subSubItem.filterRender }"
|
|
30
|
+
:formatter="formatEnum"
|
|
31
|
+
:cell-render="cellRenderData(subSubItem.cellRender)"
|
|
32
|
+
>
|
|
33
|
+
</vxe-table-column>
|
|
34
|
+
</vxe-colgroup>
|
|
35
|
+
<vxe-table-column
|
|
36
|
+
v-else
|
|
37
|
+
:edit-render="subItem.edit"
|
|
38
|
+
:key="subIndex"
|
|
39
|
+
show-overflow
|
|
40
|
+
:field="subItem.prop"
|
|
41
|
+
:align="subItem.align"
|
|
42
|
+
:title="subItem.label"
|
|
43
|
+
:type="subItem.html ? 'html' : ''"
|
|
44
|
+
:min-width="subItem.width"
|
|
45
|
+
:sortable="subItem.isSort"
|
|
46
|
+
:visible="subItem.width != 0"
|
|
47
|
+
:fixed="subItem.isFixed"
|
|
48
|
+
:filters="filterData(subItem.filterRender)"
|
|
49
|
+
:filter-render="{ name: subItem.filterRender }"
|
|
50
|
+
:formatter="formatEnum"
|
|
51
|
+
:cell-render="cellRenderData(subItem.cellRender)"
|
|
52
|
+
>
|
|
53
|
+
</vxe-table-column>
|
|
54
|
+
</template>
|
|
55
|
+
</vxe-colgroup>
|
|
56
|
+
<vxe-table-column
|
|
57
|
+
v-else
|
|
58
|
+
:edit-render="item.edit"
|
|
59
|
+
:key="index"
|
|
60
|
+
show-overflow
|
|
61
|
+
:field="item.prop"
|
|
62
|
+
:align="item.align"
|
|
63
|
+
:title="item.label"
|
|
64
|
+
:type="item.html ? 'html' : ''"
|
|
65
|
+
:min-width="item.width"
|
|
66
|
+
:sortable="item.isSort"
|
|
67
|
+
:visible="item.width != 0"
|
|
68
|
+
:fixed="item.isFixed"
|
|
69
|
+
:filters="filterData(item.filterRender)"
|
|
70
|
+
:filter-render="{ name: item.filterRender }"
|
|
71
|
+
:formatter="formatEnum"
|
|
72
|
+
:cell-render="cellRenderData(item.cellRender)"
|
|
73
|
+
>
|
|
74
|
+
</vxe-table-column>
|
|
75
|
+
</template>
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
<script>
|
|
79
|
+
export default {
|
|
80
|
+
name: "tableColumn",
|
|
81
|
+
|
|
82
|
+
data() {
|
|
83
|
+
return {
|
|
84
|
+
|
|
85
|
+
};
|
|
86
|
+
},
|
|
87
|
+
props: {
|
|
88
|
+
item: Object,
|
|
89
|
+
filterData: {
|
|
90
|
+
type: Function,
|
|
91
|
+
default: () => {
|
|
92
|
+
return {};
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
cellRenderData: {
|
|
96
|
+
type: Function,
|
|
97
|
+
default: () => {
|
|
98
|
+
return {};
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
formatEnum: {
|
|
102
|
+
type: Function,
|
|
103
|
+
default: () => {
|
|
104
|
+
return {};
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
index: {
|
|
108
|
+
type: Number,
|
|
109
|
+
default: 0
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
|
|
113
|
+
methods: {
|
|
114
|
+
},
|
|
115
|
+
};
|
|
116
|
+
</script>
|
|
117
|
+
|
|
118
|
+
<style lang="scss" scoped>
|
|
119
|
+
</style>
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
:loading="loading"
|
|
37
37
|
:row-style="rowStyle"
|
|
38
38
|
:cell-style="cellStyle_m"
|
|
39
|
+
:header-cell-class-name="headerClass"
|
|
39
40
|
:span-method="spanMethod"
|
|
40
41
|
:scroll-y="{ mode: 'wheel' }"
|
|
41
42
|
:sort-config="{ sortMethod: sortMethod }"
|
|
@@ -94,25 +95,16 @@
|
|
|
94
95
|
></vxe-table-column>
|
|
95
96
|
<!-- 后台数据列 -->
|
|
96
97
|
<template v-for="(item, index) in data.retjson.header">
|
|
97
|
-
<
|
|
98
|
-
:
|
|
99
|
-
:key="index"
|
|
100
|
-
|
|
101
|
-
:
|
|
102
|
-
:
|
|
103
|
-
:
|
|
104
|
-
|
|
105
|
-
:min-width="item.width"
|
|
106
|
-
:sortable="item.isSort"
|
|
107
|
-
:visible="item.width != 0"
|
|
108
|
-
:fixed="item.isFixed"
|
|
109
|
-
:filters="filterData(item.filterRender)"
|
|
110
|
-
:filter-render="{ name: item.filterRender }"
|
|
111
|
-
:formatter="formatEnum"
|
|
112
|
-
:cell-render="cellRenderData(item.cellRender)"
|
|
113
|
-
>
|
|
114
|
-
</vxe-table-column>
|
|
98
|
+
<table-column
|
|
99
|
+
:item="item"
|
|
100
|
+
:key="index"
|
|
101
|
+
:index="index"
|
|
102
|
+
:cellRenderData="cellRenderData"
|
|
103
|
+
:filterData="filterData"
|
|
104
|
+
:formatEnum="formatEnum"
|
|
105
|
+
></table-column>
|
|
115
106
|
</template>
|
|
107
|
+
|
|
116
108
|
<!-- 展开行 -->
|
|
117
109
|
<vxe-table-column
|
|
118
110
|
v-if="expandConfig.isOpen"
|
|
@@ -165,16 +157,17 @@
|
|
|
165
157
|
:key="index"
|
|
166
158
|
size="mini"
|
|
167
159
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
160
|
+
:style="btnHover(item.bgColor)"
|
|
168
161
|
>
|
|
169
162
|
<i
|
|
170
163
|
class="jtIcon ht-icon"
|
|
171
164
|
:style="{
|
|
172
|
-
color: item.color ? item.color : '#
|
|
165
|
+
color: item.color ? item.color : '#379FF2',
|
|
173
166
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
174
167
|
}"
|
|
175
|
-
:class="item.icon ? item.icon : '
|
|
168
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
176
169
|
></i>
|
|
177
|
-
<span class="ht-text" style="color: #
|
|
170
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
178
171
|
</el-button>
|
|
179
172
|
<el-button
|
|
180
173
|
type="text"
|
|
@@ -182,16 +175,17 @@
|
|
|
182
175
|
:key="index"
|
|
183
176
|
size="mini"
|
|
184
177
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
178
|
+
:style="btnHover(item.bgColor)"
|
|
185
179
|
>
|
|
186
180
|
<i
|
|
187
181
|
class="jtIcon ht-icon"
|
|
188
182
|
:style="{
|
|
189
|
-
color: item.color ? item.color : '#
|
|
183
|
+
color: item.color ? item.color : '#379FF2',
|
|
190
184
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
191
185
|
}"
|
|
192
|
-
:class="item.icon ? item.icon : '
|
|
186
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
193
187
|
></i>
|
|
194
|
-
<span class="ht-text" style="color: #
|
|
188
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
195
189
|
</el-button>
|
|
196
190
|
</template>
|
|
197
191
|
</template>
|
|
@@ -210,6 +204,7 @@
|
|
|
210
204
|
highlight-current-column
|
|
211
205
|
keep-source
|
|
212
206
|
v-if="tableType === 'bigData'"
|
|
207
|
+
:header-cell-class-name="headerClass"
|
|
213
208
|
:id="id"
|
|
214
209
|
:ref="id"
|
|
215
210
|
:data="data.DataArray"
|
|
@@ -271,24 +266,12 @@
|
|
|
271
266
|
></vxe-table-column>
|
|
272
267
|
<!-- 后台数据列 -->
|
|
273
268
|
<template v-for="(item, index) in data.retjson.header">
|
|
274
|
-
<
|
|
275
|
-
:
|
|
276
|
-
:key="index"
|
|
277
|
-
|
|
278
|
-
:
|
|
279
|
-
|
|
280
|
-
:title="item.label"
|
|
281
|
-
:type="item.html ? 'html' : ''"
|
|
282
|
-
:min-width="item.width"
|
|
283
|
-
:sortable="item.isSort"
|
|
284
|
-
:visible="item.width != 0"
|
|
285
|
-
:fixed="item.isFixed"
|
|
286
|
-
:filters="filterData(item.filterRender)"
|
|
287
|
-
:filter-render="{ name: item.filterRender }"
|
|
288
|
-
:formatter="formatEnum"
|
|
289
|
-
:cell-render="cellRenderData(item.cellRender)"
|
|
290
|
-
>
|
|
291
|
-
</vxe-table-column>
|
|
269
|
+
<table-column
|
|
270
|
+
:item="item"
|
|
271
|
+
:key="index"
|
|
272
|
+
:cellRenderData="cellRenderData"
|
|
273
|
+
:filterData="filterData"
|
|
274
|
+
></table-column>
|
|
292
275
|
</template>
|
|
293
276
|
<!-- 展开行 -->
|
|
294
277
|
<vxe-table-column
|
|
@@ -342,16 +325,17 @@
|
|
|
342
325
|
:key="index"
|
|
343
326
|
size="mini"
|
|
344
327
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
328
|
+
:style="btnHover(item.bgColor)"
|
|
345
329
|
>
|
|
346
330
|
<i
|
|
347
331
|
class="jtIcon ht-icon"
|
|
348
332
|
:style="{
|
|
349
|
-
color: item.color ? item.color : '#
|
|
333
|
+
color: item.color ? item.color : '#379FF2',
|
|
350
334
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
351
335
|
}"
|
|
352
|
-
:class="item.icon ? item.icon : '
|
|
336
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
353
337
|
></i>
|
|
354
|
-
<span class="ht-text" style="color: #
|
|
338
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
355
339
|
</el-button>
|
|
356
340
|
<el-button
|
|
357
341
|
type="text"
|
|
@@ -359,16 +343,17 @@
|
|
|
359
343
|
:key="index"
|
|
360
344
|
size="mini"
|
|
361
345
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
346
|
+
:style="btnHover(item.bgColor)"
|
|
362
347
|
>
|
|
363
348
|
<i
|
|
364
349
|
class="jtIcon ht-icon"
|
|
365
350
|
:style="{
|
|
366
|
-
color: item.color ? item.color : '#
|
|
351
|
+
color: item.color ? item.color : '#379FF2',
|
|
367
352
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
368
353
|
}"
|
|
369
|
-
:class="item.icon ? item.icon : '
|
|
354
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
370
355
|
></i>
|
|
371
|
-
<span class="ht-text" style="color: #
|
|
356
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
372
357
|
</el-button>
|
|
373
358
|
</template>
|
|
374
359
|
</template>
|
|
@@ -477,16 +462,17 @@
|
|
|
477
462
|
:key="'s' + index"
|
|
478
463
|
size="mini"
|
|
479
464
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
465
|
+
:style="btnHover(item.bgColor)"
|
|
480
466
|
>
|
|
481
467
|
<i
|
|
482
468
|
class="jtIcon ht-icon"
|
|
483
469
|
:style="{
|
|
484
|
-
color: item.color ? item.color : '#
|
|
470
|
+
color: item.color ? item.color : '#379FF2',
|
|
485
471
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
486
472
|
}"
|
|
487
|
-
:class="item.icon ? item.icon : '
|
|
473
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
488
474
|
></i>
|
|
489
|
-
<span class="ht-text" style="color: #
|
|
475
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
490
476
|
</el-button>
|
|
491
477
|
</template>
|
|
492
478
|
<template v-for="(item, index) in row.inBottons">
|
|
@@ -496,16 +482,17 @@
|
|
|
496
482
|
:key="index"
|
|
497
483
|
size="mini"
|
|
498
484
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
485
|
+
:style="btnHover(item.bgColor)"
|
|
499
486
|
>
|
|
500
487
|
<i
|
|
501
488
|
class="jtIcon ht-icon"
|
|
502
489
|
:style="{
|
|
503
|
-
color: item.color ? item.color : '#
|
|
490
|
+
color: item.color ? item.color : '#379FF2',
|
|
504
491
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
505
492
|
}"
|
|
506
|
-
:class="item.icon ? item.icon : '
|
|
493
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
507
494
|
></i>
|
|
508
|
-
<span class="ht-text" style="color: #
|
|
495
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
509
496
|
</el-button>
|
|
510
497
|
</template>
|
|
511
498
|
</template>
|
|
@@ -723,16 +710,17 @@
|
|
|
723
710
|
:key="'s' + index"
|
|
724
711
|
size="mini"
|
|
725
712
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
713
|
+
:style="btnHover(item.bgColor)"
|
|
726
714
|
>
|
|
727
715
|
<i
|
|
728
716
|
class="jtIcon ht-icon"
|
|
729
717
|
:style="{
|
|
730
|
-
color: item.color ? item.color : '#
|
|
718
|
+
color: item.color ? item.color : '#379FF2',
|
|
731
719
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
732
720
|
}"
|
|
733
|
-
:class="item.icon ? item.icon : '
|
|
721
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
734
722
|
></i>
|
|
735
|
-
<span class="ht-text" style="color: #
|
|
723
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
736
724
|
</el-button>
|
|
737
725
|
</template>
|
|
738
726
|
<template v-for="(item, index) in row.inBottons">
|
|
@@ -742,16 +730,17 @@
|
|
|
742
730
|
:key="index"
|
|
743
731
|
size="mini"
|
|
744
732
|
@click="handlerColClick(item.funcode, row, rowIndex)"
|
|
733
|
+
:style="btnHover(item.bgColor)"
|
|
745
734
|
>
|
|
746
735
|
<i
|
|
747
736
|
class="jtIcon ht-icon"
|
|
748
737
|
:style="{
|
|
749
|
-
color: item.color ? item.color : '#
|
|
738
|
+
color: item.color ? item.color : '#379FF2',
|
|
750
739
|
fontSize: item.size ? item.size + 'px' : '16px',
|
|
751
740
|
}"
|
|
752
|
-
:class="item.icon ? item.icon : '
|
|
741
|
+
:class="item.icon ? item.icon : 'iconxiangqing'"
|
|
753
742
|
></i>
|
|
754
|
-
<span class="ht-text" style="color: #
|
|
743
|
+
<span class="ht-text" :style="{color:item.textColor ? item.textColor : '#379FF2'}">{{ item.name }}</span>
|
|
755
744
|
</el-button>
|
|
756
745
|
</template>
|
|
757
746
|
</template>
|
|
@@ -763,8 +752,12 @@
|
|
|
763
752
|
|
|
764
753
|
<script>
|
|
765
754
|
import XEUtils from "xe-utils";
|
|
755
|
+
import tableColumn from './components/tableColumn.vue'
|
|
766
756
|
export default {
|
|
767
757
|
name: "jt-table-pc",
|
|
758
|
+
components: {
|
|
759
|
+
tableColumn,
|
|
760
|
+
},
|
|
768
761
|
created() {
|
|
769
762
|
if (this.isPage) {
|
|
770
763
|
this.tDataCopy = JSON.parse(JSON.stringify(this.data.DataArray));
|
|
@@ -959,6 +952,7 @@ export default {
|
|
|
959
952
|
data() {
|
|
960
953
|
return {
|
|
961
954
|
tableData: this.data.DataArray, //表格数据
|
|
955
|
+
headerClass: (this.data.retjson.header || []).find(i => (i.children || []).length) ? 'has-sub-header' : 'normal-header',
|
|
962
956
|
colNum: 0, //当前列的数量
|
|
963
957
|
leftCol: 0, //从左起计算合并列的基数
|
|
964
958
|
//分组表格的配置
|
|
@@ -994,6 +988,12 @@ export default {
|
|
|
994
988
|
};
|
|
995
989
|
},
|
|
996
990
|
methods: {
|
|
991
|
+
btnHover(color){
|
|
992
|
+
return {
|
|
993
|
+
backgroundColor:color ? color : '',
|
|
994
|
+
"--background-color-hover":color ? color + 'B3' : '#EAF5FE' + 'B3'
|
|
995
|
+
}
|
|
996
|
+
},
|
|
997
997
|
//指定位置插入数据
|
|
998
998
|
insertAt(records, row) {
|
|
999
999
|
this.$refs[this.id].insertAt(records, row);
|
|
@@ -1416,7 +1416,7 @@ export default {
|
|
|
1416
1416
|
//树 懒加载方法
|
|
1417
1417
|
loadChildrenMethod({ row }) {
|
|
1418
1418
|
return new Promise(async (resolve) => {
|
|
1419
|
-
if (row.activeValue.indexOf("search") !== -1 ) {
|
|
1419
|
+
if (row && row.activeValue && row.activeValue.indexOf("search") !== -1 ) {
|
|
1420
1420
|
resolve(this.treeTempData);
|
|
1421
1421
|
} else {
|
|
1422
1422
|
const { data } = await this.$axios.post(
|
|
@@ -1618,9 +1618,12 @@ export default {
|
|
|
1618
1618
|
right: 2px;
|
|
1619
1619
|
top: 1px;
|
|
1620
1620
|
}
|
|
1621
|
-
.jt-table-class-only .el-button
|
|
1622
|
-
|
|
1623
|
-
|
|
1621
|
+
.jt-table-class-only .el-button{
|
|
1622
|
+
background:#EAF5FE;
|
|
1623
|
+
padding:4px 10px;
|
|
1624
|
+
}
|
|
1625
|
+
.jt-table-class-only .el-button:hover{
|
|
1626
|
+
background-color:var(--background-color-hover) !important;
|
|
1624
1627
|
}
|
|
1625
1628
|
.jt-table-class-only .vxe-cell--tree-node {
|
|
1626
1629
|
cursor: pointer;
|
|
@@ -1656,4 +1659,7 @@ export default {
|
|
|
1656
1659
|
.isWrap .vxe-header--row .vxe-cell {
|
|
1657
1660
|
flex-wrap: wrap;
|
|
1658
1661
|
}
|
|
1662
|
+
.has-sub-header {
|
|
1663
|
+
background: #fff;
|
|
1664
|
+
}
|
|
1659
1665
|
</style>
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
<vxe-toolbar class="jt-toolbar" :custom="{icon:'jtIcon iconpeizhi41 colStyle'}"></vxe-toolbar>
|
|
8
8
|
</div>
|
|
9
9
|
<vxe-table
|
|
10
|
+
:header-cell-class-name="headerClass"
|
|
10
11
|
size="mini"
|
|
11
12
|
class="jt-table-class-only"
|
|
12
13
|
v-if="tableType === 'default'"
|
|
@@ -78,26 +79,16 @@
|
|
|
78
79
|
fixed="left"
|
|
79
80
|
></vxe-table-column>
|
|
80
81
|
<!-- 后台数据列 -->
|
|
81
|
-
<template v-for="(item,index) in data.retjson.header">
|
|
82
|
-
<
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
:sortable="item.isSort"
|
|
92
|
-
:visible="item.width!=0"
|
|
93
|
-
:fixed="item.isFixed"
|
|
94
|
-
:filters="filterData(item.filterRender)"
|
|
95
|
-
:filter-render="{name: item.filterRender}"
|
|
96
|
-
:formatter="formatEnum"
|
|
97
|
-
:cell-render="cellRenderData(item.cellRender)"
|
|
98
|
-
>
|
|
99
|
-
</vxe-table-column>
|
|
100
|
-
</template>
|
|
82
|
+
<template v-for="(item,index) in data.retjson.header">
|
|
83
|
+
<table-column
|
|
84
|
+
:item="item"
|
|
85
|
+
:key="index"
|
|
86
|
+
:index="index"
|
|
87
|
+
:cellRenderData="cellRenderData"
|
|
88
|
+
:filterData="filterData"
|
|
89
|
+
:formatEnum="formatEnum"
|
|
90
|
+
></table-column>
|
|
91
|
+
</template>
|
|
101
92
|
<!-- 展开行 -->
|
|
102
93
|
<vxe-table-column
|
|
103
94
|
v-if="expandConfig.isOpen"
|
|
@@ -170,6 +161,7 @@
|
|
|
170
161
|
</vxe-table>
|
|
171
162
|
<!-- 大数据 -->
|
|
172
163
|
<vxe-table
|
|
164
|
+
:header-cell-class-name="headerClass"
|
|
173
165
|
size="mini"
|
|
174
166
|
class="jt-table-class-only"
|
|
175
167
|
v-if="tableType === 'bigData'"
|
|
@@ -191,6 +183,7 @@
|
|
|
191
183
|
}"
|
|
192
184
|
highlight-current-row
|
|
193
185
|
highlight-current-column
|
|
186
|
+
|
|
194
187
|
:radio-config="{checkRowKey: null}"
|
|
195
188
|
:keyboard-config="{isArrow: true}"
|
|
196
189
|
export-config
|
|
@@ -236,24 +229,15 @@
|
|
|
236
229
|
fixed="left"
|
|
237
230
|
></vxe-table-column>
|
|
238
231
|
<!-- 后台数据列 -->
|
|
239
|
-
<template v-for="(item,index) in data.retjson.header">
|
|
240
|
-
<
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
:min-width="item.width"
|
|
249
|
-
:sortable="item.isSort"
|
|
250
|
-
:visible="item.width!=0"
|
|
251
|
-
:fixed="item.isFixed"
|
|
252
|
-
:filters="filterData(item.filterRender)"
|
|
253
|
-
:filter-render="{name: item.filterRender}"
|
|
254
|
-
:formatter="formatEnum"
|
|
255
|
-
>
|
|
256
|
-
</vxe-table-column>
|
|
232
|
+
<template v-for="(item, index) in data.retjson.header">
|
|
233
|
+
<table-column
|
|
234
|
+
:item="item"
|
|
235
|
+
:key="index"
|
|
236
|
+
:index="index"
|
|
237
|
+
:cellRenderData="cellRenderData"
|
|
238
|
+
:filterData="filterData"
|
|
239
|
+
:formatEnum="formatEnum"
|
|
240
|
+
></table-column>
|
|
257
241
|
</template>
|
|
258
242
|
<!-- 操作列 -->
|
|
259
243
|
<vxe-table-column title="操作"
|
|
@@ -642,10 +626,14 @@
|
|
|
642
626
|
|
|
643
627
|
<script>
|
|
644
628
|
import XEUtils from 'xe-utils';
|
|
629
|
+
import tableColumn from './components/tableColumn.vue'
|
|
645
630
|
import axios from 'axios';
|
|
646
631
|
import { importData } from './importData';
|
|
647
632
|
export default {
|
|
648
633
|
name: 'jt-table-pc',
|
|
634
|
+
components: {
|
|
635
|
+
tableColumn
|
|
636
|
+
},
|
|
649
637
|
created () {
|
|
650
638
|
if(this.isPage){
|
|
651
639
|
this.tDataCopy = JSON.parse(JSON.stringify(this.data.DataArray));
|
|
@@ -835,7 +823,8 @@ export default {
|
|
|
835
823
|
},
|
|
836
824
|
data(){
|
|
837
825
|
return {
|
|
838
|
-
tableData:this.data.DataArray, //表格数据
|
|
826
|
+
tableData: this.data.DataArray, //表格数据
|
|
827
|
+
headerClass: (this.data.retjson.header || []).find(i => (i.children || []).length) ? 'has-sub-header' : 'normal-header',
|
|
839
828
|
colNum:0,//当前列的数量
|
|
840
829
|
leftCol:0,//从左起计算合并列的基数
|
|
841
830
|
//分组表格的配置
|
|
@@ -1440,4 +1429,7 @@ export default {
|
|
|
1440
1429
|
.isWrap .vxe-header--row .vxe-cell{
|
|
1441
1430
|
flex-wrap: wrap;
|
|
1442
1431
|
}
|
|
1432
|
+
.vxe-table--header .vxe-header--row {
|
|
1433
|
+
background: #fff;
|
|
1434
|
+
}
|
|
1443
1435
|
</style>
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
<!-- 后台数据列 -->
|
|
2
|
+
<template>
|
|
3
|
+
<!-- <template v-for="(item,index) in data.retjson.header"> -->
|
|
4
|
+
<vxe-colgroup
|
|
5
|
+
v-if="item.children && item.children.length"
|
|
6
|
+
:title="item.label"
|
|
7
|
+
:key="index"
|
|
8
|
+
>
|
|
9
|
+
<template v-for="(subItem, subIndex) in item.children">
|
|
10
|
+
<vxe-colgroup
|
|
11
|
+
v-if="subItem.children && subItem.children.length"
|
|
12
|
+
:title="subItem.label"
|
|
13
|
+
:key="subIndex"
|
|
14
|
+
>
|
|
15
|
+
<vxe-table-column
|
|
16
|
+
v-for="(subSubItem, subSubIndex) in subItem.children"
|
|
17
|
+
:edit-render="subSubItem.edit"
|
|
18
|
+
:key="subSubIndex"
|
|
19
|
+
show-overflow
|
|
20
|
+
:field="subSubItem.prop"
|
|
21
|
+
:align="subSubItem.align"
|
|
22
|
+
:title="subSubItem.label"
|
|
23
|
+
:type="subSubItem.html ? 'html': ''"
|
|
24
|
+
:min-width="subSubItem.width"
|
|
25
|
+
:sortable="subSubItem.isSort"
|
|
26
|
+
:visible="subSubItem.width!=0"
|
|
27
|
+
:fixed="subSubItem.isFixed"
|
|
28
|
+
:filters="filterData(subSubItem.filterRender)"
|
|
29
|
+
:filter-render="{name: subSubItem.filterRender}"
|
|
30
|
+
:formatter="formatEnum"
|
|
31
|
+
:cell-render="cellRenderData(subSubItem.cellRender)"
|
|
32
|
+
>
|
|
33
|
+
</vxe-table-column>
|
|
34
|
+
</vxe-colgroup>
|
|
35
|
+
<vxe-table-column
|
|
36
|
+
v-else
|
|
37
|
+
:edit-render="subItem.edit"
|
|
38
|
+
:key="subIndex"
|
|
39
|
+
show-overflow
|
|
40
|
+
:field="subItem.prop"
|
|
41
|
+
:align="subItem.align"
|
|
42
|
+
:title="subItem.label"
|
|
43
|
+
:type="subItem.html ? 'html': ''"
|
|
44
|
+
:min-width="subItem.width"
|
|
45
|
+
:sortable="subItem.isSort"
|
|
46
|
+
:visible="subItem.width!=0"
|
|
47
|
+
:fixed="subItem.isFixed"
|
|
48
|
+
:filters="filterData(subItem.filterRender)"
|
|
49
|
+
:filter-render="{name: subItem.filterRender}"
|
|
50
|
+
:formatter="formatEnum"
|
|
51
|
+
:cell-render="cellRenderData(subItem.cellRender)"
|
|
52
|
+
>
|
|
53
|
+
</vxe-table-column>
|
|
54
|
+
</template>
|
|
55
|
+
</vxe-colgroup>
|
|
56
|
+
<vxe-table-column
|
|
57
|
+
v-else
|
|
58
|
+
:edit-render="item.edit"
|
|
59
|
+
:key="index"
|
|
60
|
+
show-overflow
|
|
61
|
+
:field="item.prop"
|
|
62
|
+
:align="item.align"
|
|
63
|
+
:title="item.label"
|
|
64
|
+
:type="item.html ? 'html': ''"
|
|
65
|
+
:min-width="item.width"
|
|
66
|
+
:sortable="item.isSort"
|
|
67
|
+
:visible="item.width!=0"
|
|
68
|
+
:fixed="item.isFixed"
|
|
69
|
+
:filters="filterData(item.filterRender)"
|
|
70
|
+
:filter-render="{name: item.filterRender}"
|
|
71
|
+
:formatter="formatEnum"
|
|
72
|
+
:cell-render="cellRenderData(item.cellRender)"
|
|
73
|
+
>
|
|
74
|
+
</vxe-table-column>
|
|
75
|
+
</template>
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
<script>
|
|
79
|
+
export default {
|
|
80
|
+
name: "tableColumn",
|
|
81
|
+
data() {
|
|
82
|
+
return {
|
|
83
|
+
|
|
84
|
+
};
|
|
85
|
+
},
|
|
86
|
+
props: {
|
|
87
|
+
item: Object,
|
|
88
|
+
filterData: {
|
|
89
|
+
type: Function,
|
|
90
|
+
default: () => {
|
|
91
|
+
return {};
|
|
92
|
+
},
|
|
93
|
+
},
|
|
94
|
+
cellRenderData: {
|
|
95
|
+
type: Function,
|
|
96
|
+
default: () => {
|
|
97
|
+
return {};
|
|
98
|
+
},
|
|
99
|
+
},
|
|
100
|
+
formatEnum: {
|
|
101
|
+
type: Function,
|
|
102
|
+
default: () => {
|
|
103
|
+
return {};
|
|
104
|
+
},
|
|
105
|
+
},
|
|
106
|
+
index: {
|
|
107
|
+
type: Number,
|
|
108
|
+
default: 0
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
|
|
112
|
+
methods: {
|
|
113
|
+
},
|
|
114
|
+
};
|
|
115
|
+
</script>
|
|
116
|
+
|
|
117
|
+
<style lang="scss" scoped>
|
|
118
|
+
</style>
|