@leevan/jtui 2.0.6 → 2.0.7-npm
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/lib/jtui.common.js +251 -123
- package/lib/jtui.css +1 -1
- package/lib/jtui.umd.js +251 -123
- 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 +25 -36
- 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 -1793
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"
|
|
@@ -212,6 +204,7 @@
|
|
|
212
204
|
highlight-current-column
|
|
213
205
|
keep-source
|
|
214
206
|
v-if="tableType === 'bigData'"
|
|
207
|
+
:header-cell-class-name="headerClass"
|
|
215
208
|
:id="id"
|
|
216
209
|
:ref="id"
|
|
217
210
|
:data="data.DataArray"
|
|
@@ -273,24 +266,12 @@
|
|
|
273
266
|
></vxe-table-column>
|
|
274
267
|
<!-- 后台数据列 -->
|
|
275
268
|
<template v-for="(item, index) in data.retjson.header">
|
|
276
|
-
<
|
|
277
|
-
:
|
|
278
|
-
:key="index"
|
|
279
|
-
|
|
280
|
-
:
|
|
281
|
-
|
|
282
|
-
:title="item.label"
|
|
283
|
-
:type="item.html ? 'html' : ''"
|
|
284
|
-
:min-width="item.width"
|
|
285
|
-
:sortable="item.isSort"
|
|
286
|
-
:visible="item.width != 0"
|
|
287
|
-
:fixed="item.isFixed"
|
|
288
|
-
:filters="filterData(item.filterRender)"
|
|
289
|
-
:filter-render="{ name: item.filterRender }"
|
|
290
|
-
:formatter="formatEnum"
|
|
291
|
-
:cell-render="cellRenderData(item.cellRender)"
|
|
292
|
-
>
|
|
293
|
-
</vxe-table-column>
|
|
269
|
+
<table-column
|
|
270
|
+
:item="item"
|
|
271
|
+
:key="index"
|
|
272
|
+
:cellRenderData="cellRenderData"
|
|
273
|
+
:filterData="filterData"
|
|
274
|
+
></table-column>
|
|
294
275
|
</template>
|
|
295
276
|
<!-- 展开行 -->
|
|
296
277
|
<vxe-table-column
|
|
@@ -771,8 +752,12 @@
|
|
|
771
752
|
|
|
772
753
|
<script>
|
|
773
754
|
import XEUtils from "xe-utils";
|
|
755
|
+
import tableColumn from './components/tableColumn.vue'
|
|
774
756
|
export default {
|
|
775
757
|
name: "jt-table-pc",
|
|
758
|
+
components: {
|
|
759
|
+
tableColumn,
|
|
760
|
+
},
|
|
776
761
|
created() {
|
|
777
762
|
if (this.isPage) {
|
|
778
763
|
this.tDataCopy = JSON.parse(JSON.stringify(this.data.DataArray));
|
|
@@ -967,6 +952,7 @@ export default {
|
|
|
967
952
|
data() {
|
|
968
953
|
return {
|
|
969
954
|
tableData: this.data.DataArray, //表格数据
|
|
955
|
+
headerClass: (this.data.retjson.header || []).find(i => (i.children || []).length) ? 'has-sub-header' : 'normal-header',
|
|
970
956
|
colNum: 0, //当前列的数量
|
|
971
957
|
leftCol: 0, //从左起计算合并列的基数
|
|
972
958
|
//分组表格的配置
|
|
@@ -1673,4 +1659,7 @@ export default {
|
|
|
1673
1659
|
.isWrap .vxe-header--row .vxe-cell {
|
|
1674
1660
|
flex-wrap: wrap;
|
|
1675
1661
|
}
|
|
1662
|
+
.has-sub-header {
|
|
1663
|
+
background: #fff;
|
|
1664
|
+
}
|
|
1676
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>
|