gyyg-components 0.2.20 → 0.2.22
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/package.json
CHANGED
|
@@ -1,24 +1,62 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="btn-group">
|
|
3
|
-
<div
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
3
|
+
<div
|
|
4
|
+
v-for="btn in btnList"
|
|
5
|
+
:key="btn.id"
|
|
6
|
+
v-has-permi="btn.hasPermi ? [btn.hasPermi] : undefined"
|
|
7
|
+
>
|
|
8
|
+
<template v-if="btn.isDot || btn.number">
|
|
9
|
+
<el-badge
|
|
10
|
+
:is-dot="btn.isDot"
|
|
11
|
+
:value="btn.number"
|
|
12
|
+
:style="btn.number ? 'margin-right: 20px;' : ''"
|
|
13
|
+
>
|
|
14
|
+
<el-button
|
|
15
|
+
v-if="!btn['componentType']"
|
|
16
|
+
:disabled="btn.disabled"
|
|
17
|
+
:size="btn.size || 'small'"
|
|
18
|
+
:type="btn.type"
|
|
19
|
+
:icon="!btn.rightIcon ? btn.icon : ''"
|
|
20
|
+
:loading="btn.loading"
|
|
21
|
+
@click="btnClick(btn)"
|
|
22
|
+
>{{ btn.text }}
|
|
23
|
+
<i
|
|
24
|
+
v-if="btn.rightIcon"
|
|
25
|
+
:class="btn.icon + ' el-icon--right'"
|
|
26
|
+
></i>
|
|
27
|
+
</el-button>
|
|
28
|
+
<div v-else>
|
|
29
|
+
<component
|
|
30
|
+
:is="btn['componentType']"
|
|
31
|
+
:btnInfo="btn"
|
|
32
|
+
></component>
|
|
33
|
+
</div>
|
|
34
|
+
</el-badge>
|
|
35
|
+
</template>
|
|
36
|
+
<template v-else>
|
|
37
|
+
<el-button
|
|
38
|
+
v-if="!btn['componentType']"
|
|
39
|
+
:disabled="btn.disabled"
|
|
40
|
+
:size="btn.size || 'small'"
|
|
41
|
+
:type="btn.type"
|
|
42
|
+
:icon="!btn.rightIcon ? btn.icon : ''"
|
|
43
|
+
:loading="btn.loading"
|
|
44
|
+
@click="btnClick(btn)"
|
|
13
45
|
>{{ btn.text }}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
46
|
+
<i
|
|
47
|
+
v-if="btn.rightIcon"
|
|
48
|
+
:class="btn.icon + ' el-icon--right'"
|
|
49
|
+
></i>
|
|
50
|
+
</el-button>
|
|
51
|
+
<div v-else>
|
|
52
|
+
<component
|
|
53
|
+
:is="btn['componentType']"
|
|
54
|
+
:btnInfo="btn"
|
|
55
|
+
></component>
|
|
56
|
+
</div>
|
|
57
|
+
</template>
|
|
58
|
+
|
|
59
|
+
|
|
22
60
|
</div>
|
|
23
61
|
</div>
|
|
24
62
|
</template>
|
|
@@ -35,8 +73,8 @@ export default {
|
|
|
35
73
|
methods: {
|
|
36
74
|
// 按钮点击事件
|
|
37
75
|
btnClick(btn) {
|
|
38
|
-
|
|
39
|
-
if(btn.trigger){
|
|
76
|
+
|
|
77
|
+
if (btn.trigger) {
|
|
40
78
|
btn.trigger()
|
|
41
79
|
}
|
|
42
80
|
}
|
|
@@ -48,14 +86,14 @@ export default {
|
|
|
48
86
|
display: flex;
|
|
49
87
|
align-items: center;
|
|
50
88
|
flex-wrap: wrap;
|
|
89
|
+
|
|
51
90
|
&>div {
|
|
52
91
|
margin-left: 5px;
|
|
53
92
|
margin-bottom: 10px;
|
|
93
|
+
|
|
54
94
|
&:first-child {
|
|
55
95
|
margin-left: 0;
|
|
56
96
|
}
|
|
57
97
|
}
|
|
58
98
|
}
|
|
59
|
-
</style>
|
|
60
|
-
|
|
61
|
-
|
|
99
|
+
</style>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="table-container">
|
|
3
|
-
<el-table
|
|
3
|
+
<el-table
|
|
4
4
|
:data="tableData"
|
|
5
5
|
ref='table'
|
|
6
6
|
:height="height"
|
|
7
|
-
|
|
7
|
+
:max-height="maxHeight"
|
|
8
8
|
:highlight-current-row="highlightCurrentRow"
|
|
9
9
|
:row-class-name="tableRowClassName"
|
|
10
10
|
:header-cell-style="headerCellStyle"
|
|
@@ -13,56 +13,89 @@
|
|
|
13
13
|
:tree-props="treeProps"
|
|
14
14
|
@current-change="currentChange"
|
|
15
15
|
@sort-change="sortChange"
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
@selection-change="selectionChange"
|
|
17
|
+
@select="select"
|
|
18
18
|
:row-style="selectedRowStyle"
|
|
19
19
|
:default-expand-all="defaultExpandAll"
|
|
20
20
|
@row-click="rowClickHandel"
|
|
21
21
|
@row-dblclick="rowDblclickHandel"
|
|
22
22
|
:border="border"
|
|
23
|
-
|
|
23
|
+
>
|
|
24
24
|
<!-- 多选框 -->
|
|
25
|
-
|
|
25
|
+
<el-table-column
|
|
26
26
|
type="selection"
|
|
27
27
|
width="55"
|
|
28
28
|
align="center"
|
|
29
29
|
:reserve-selection="reserveSelection"
|
|
30
30
|
v-if="selection"
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
></el-table-column>
|
|
32
|
+
<template v-for="(col, index) in column">
|
|
33
33
|
<el-table-column
|
|
34
|
-
v-if="!col['type']"
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
34
|
+
v-if="!col['type'] && (!col.headerList || col.headerList.length === 0)"
|
|
35
|
+
:label="col.label"
|
|
36
|
+
:align="col.align"
|
|
37
|
+
:min-width="col.minWidth"
|
|
38
|
+
:max-width="col.maxWidth"
|
|
39
|
+
:width="col.width"
|
|
40
|
+
:sortable="col.sortable"
|
|
41
|
+
:show-overflow-tooltip="col.showOverflowTooltip"
|
|
42
|
+
:key="index"
|
|
43
|
+
:fixed="col.fixed"
|
|
44
44
|
:prop="col.bind"
|
|
45
|
+
>
|
|
46
|
+
<template
|
|
47
|
+
slot="header"
|
|
48
|
+
v-if="col.header == 'custom'"
|
|
45
49
|
>
|
|
46
|
-
<template slot="header" v-if="col.header == 'custom'">
|
|
47
50
|
<span>{{ col.label }}
|
|
48
|
-
<el-tooltip
|
|
51
|
+
<el-tooltip
|
|
52
|
+
class="item"
|
|
53
|
+
effect="dark"
|
|
54
|
+
:content="col.message"
|
|
55
|
+
placement="top"
|
|
56
|
+
>
|
|
49
57
|
<i :class="col.headerIcon || 'el-icon-question'"></i>
|
|
50
58
|
</el-tooltip>
|
|
51
59
|
</span>
|
|
52
60
|
</template>
|
|
53
61
|
</el-table-column>
|
|
62
|
+
|
|
63
|
+
<!-- 多级表头处理 -->
|
|
54
64
|
<el-table-column
|
|
55
|
-
v-else
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
+
v-else-if="!col['type'] && col.headerList && col.headerList.length > 0"
|
|
66
|
+
:label="col.label"
|
|
67
|
+
:key="index + 'header'"
|
|
68
|
+
:fixed="col.fixed"
|
|
69
|
+
:min-width="col.minWidth"
|
|
70
|
+
>
|
|
71
|
+
<el-table-column
|
|
72
|
+
v-for="(item, subIndex) in col.headerList"
|
|
73
|
+
:key="subIndex"
|
|
74
|
+
:prop="item.bind"
|
|
75
|
+
:label="item.label"
|
|
76
|
+
:align="item.align"
|
|
77
|
+
:show-overflow-tooltip="item.showOverflowTooltip"
|
|
78
|
+
:min-width="item.minWidth"
|
|
79
|
+
:max-width="item.maxWidth"
|
|
80
|
+
:width="item.width"
|
|
81
|
+
:sortable="item.sortable"
|
|
65
82
|
>
|
|
83
|
+
</el-table-column>
|
|
84
|
+
</el-table-column>
|
|
85
|
+
|
|
86
|
+
<!-- 有type的列 -->
|
|
87
|
+
<el-table-column
|
|
88
|
+
v-else
|
|
89
|
+
:label="col.label"
|
|
90
|
+
:align="col.align"
|
|
91
|
+
:min-width="col.minWidth"
|
|
92
|
+
:max-width="col.maxWidth"
|
|
93
|
+
:width="col.width"
|
|
94
|
+
:sortable="col.sortable"
|
|
95
|
+
:show-overflow-tooltip="col.showOverflowTooltip"
|
|
96
|
+
:key="index + col.type"
|
|
97
|
+
:fixed="col.fixed"
|
|
98
|
+
>
|
|
66
99
|
<template slot-scope="scope">
|
|
67
100
|
<component
|
|
68
101
|
:key="index"
|
|
@@ -71,32 +104,42 @@
|
|
|
71
104
|
:tableData="col"
|
|
72
105
|
v-model="scope.row[col.bind]"
|
|
73
106
|
v-bind="typeof col.componentProps === 'function' ? col.componentProps(scope.row) : col.componentProps"
|
|
74
|
-
v-on="col.componentListeners || {}"
|
|
107
|
+
v-on="typeof col.componentListeners === 'function' ? col.componentListeners(scope.row) : col.componentListeners || {}"
|
|
75
108
|
></component>
|
|
76
109
|
</template>
|
|
77
|
-
<template
|
|
110
|
+
<template
|
|
111
|
+
slot="header"
|
|
112
|
+
v-if="col.header == 'custom'"
|
|
113
|
+
>
|
|
78
114
|
<span>{{ col.label }}
|
|
79
|
-
<el-tooltip
|
|
115
|
+
<el-tooltip
|
|
116
|
+
class="item"
|
|
117
|
+
effect="dark"
|
|
118
|
+
:content="col.message"
|
|
119
|
+
placement="top"
|
|
120
|
+
>
|
|
80
121
|
<i :class="col.headerIcon || 'el-icon-question'"></i>
|
|
81
122
|
</el-tooltip>
|
|
82
123
|
</span>
|
|
83
124
|
</template>
|
|
84
125
|
</el-table-column>
|
|
85
|
-
|
|
86
|
-
|
|
126
|
+
</template>
|
|
87
127
|
</el-table>
|
|
88
128
|
<!-- 分页 -->
|
|
89
|
-
|
|
129
|
+
<div
|
|
130
|
+
class="pagination-layout"
|
|
131
|
+
v-if="page"
|
|
132
|
+
>
|
|
90
133
|
<el-pagination
|
|
91
134
|
@size-change="handleSizeChange"
|
|
92
135
|
@current-change="handleCurrentChange"
|
|
93
136
|
:page-sizes="[10, 20, 30, 50]"
|
|
94
|
-
|
|
95
|
-
|
|
137
|
+
:page-size="page.pageSize"
|
|
138
|
+
:current-page="page.currentPage"
|
|
96
139
|
layout="total, sizes, prev, pager, next, jumper"
|
|
97
|
-
|
|
140
|
+
:total="page.totalRecords"
|
|
98
141
|
></el-pagination>
|
|
99
|
-
|
|
142
|
+
</div>
|
|
100
143
|
</div>
|
|
101
144
|
</template>
|
|
102
145
|
<script>
|
|
@@ -117,8 +160,8 @@ export default {
|
|
|
117
160
|
},
|
|
118
161
|
// 表格列
|
|
119
162
|
columns: {
|
|
120
|
-
|
|
121
|
-
|
|
163
|
+
required: true,
|
|
164
|
+
},
|
|
122
165
|
// 表格高度
|
|
123
166
|
height: {
|
|
124
167
|
required: false
|
|
@@ -129,24 +172,24 @@ export default {
|
|
|
129
172
|
},
|
|
130
173
|
// 是否显示多选框
|
|
131
174
|
selection: {
|
|
132
|
-
|
|
133
|
-
|
|
175
|
+
required: false,
|
|
176
|
+
},
|
|
134
177
|
// 是否保留多选框
|
|
135
178
|
reserveSelection: {
|
|
136
|
-
|
|
179
|
+
type: Boolean,
|
|
137
180
|
default: false
|
|
138
181
|
},
|
|
139
182
|
// 分页
|
|
140
183
|
page: {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
184
|
+
// 分页
|
|
185
|
+
required: false,
|
|
186
|
+
},
|
|
144
187
|
// 是否高亮当前行
|
|
145
188
|
highlightCurrentRow: {
|
|
146
189
|
required: false,
|
|
147
190
|
},
|
|
148
191
|
// 表头样式
|
|
149
|
-
headerCellStyle:{
|
|
192
|
+
headerCellStyle: {
|
|
150
193
|
required: false,
|
|
151
194
|
default: () => {
|
|
152
195
|
return {
|
|
@@ -156,26 +199,26 @@ export default {
|
|
|
156
199
|
},
|
|
157
200
|
// 行数据的key
|
|
158
201
|
rowKey: {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
202
|
+
type: [String, Number],
|
|
203
|
+
default: 'id',
|
|
204
|
+
},
|
|
162
205
|
// 行className回调
|
|
163
|
-
tableRowClassName:{
|
|
206
|
+
tableRowClassName: {
|
|
164
207
|
type: [Function, String],
|
|
165
208
|
required: false,
|
|
166
209
|
},
|
|
167
210
|
// 展开行的key
|
|
168
211
|
expandRowKeys: {
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
212
|
+
type: Array,
|
|
213
|
+
required: false,
|
|
214
|
+
},
|
|
172
215
|
// 嵌套数据的配置选项
|
|
173
216
|
treeProps: {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
217
|
+
type: Object,
|
|
218
|
+
default: () => {
|
|
219
|
+
return {};
|
|
220
|
+
},
|
|
221
|
+
},
|
|
179
222
|
// 是否默认展开所有行
|
|
180
223
|
defaultExpandAll: {
|
|
181
224
|
default: false,
|
|
@@ -197,41 +240,41 @@ export default {
|
|
|
197
240
|
},
|
|
198
241
|
methods: {
|
|
199
242
|
// 列表选中当前行字体加粗
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
243
|
+
selectedRowStyle({ row }) {
|
|
244
|
+
const idArr = this.multipleSelection.map(row => row[this.rowKey])
|
|
245
|
+
if (idArr.includes(row[this.rowKey])) {
|
|
246
|
+
return { 'font-weight': '700' }
|
|
247
|
+
}
|
|
248
|
+
},
|
|
206
249
|
// pageSize 改变时会触发
|
|
207
250
|
handleSizeChange(val) {
|
|
208
251
|
this.$emit('page-size-change', val);
|
|
209
252
|
},
|
|
210
253
|
// // currentPage 改变时会触发
|
|
211
254
|
handleCurrentChange(val) {
|
|
212
|
-
|
|
213
|
-
|
|
255
|
+
this.$emit('page-change', val);
|
|
256
|
+
},
|
|
214
257
|
// 表格属性回调
|
|
215
258
|
currentChange(val) {
|
|
216
259
|
this.$emit('current-change', val);
|
|
217
260
|
},
|
|
218
261
|
// 排序规则发生变化时会触发
|
|
219
262
|
sortChange(column, prop, order) {
|
|
220
|
-
|
|
221
|
-
|
|
263
|
+
this.$emit('sort-change', column, prop, order);
|
|
264
|
+
},
|
|
222
265
|
// 手动勾选数据行的checkbox时触发的事件
|
|
223
266
|
select(column, row) {
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
267
|
+
let refs = this.$refs.table;
|
|
268
|
+
this.$emit('select', column, row, refs);
|
|
269
|
+
},
|
|
227
270
|
// 选择项发生变化时会触发
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
271
|
+
selectionChange(column) {
|
|
272
|
+
this.multipleSelection = column
|
|
273
|
+
this.$emit('selection-change', column);
|
|
274
|
+
},
|
|
232
275
|
// 行点击触发的事件
|
|
233
276
|
rowClickHandel(column) {
|
|
234
|
-
if(this.toggleRow) {
|
|
277
|
+
if (this.toggleRow) {
|
|
235
278
|
this.$refs.table.clearSelection()
|
|
236
279
|
this.$refs.table.toggleRowSelection(column)
|
|
237
280
|
}
|
|
@@ -244,15 +287,15 @@ export default {
|
|
|
244
287
|
|
|
245
288
|
},
|
|
246
289
|
watch: {
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
290
|
+
columns: {
|
|
291
|
+
handler: function (val) {
|
|
292
|
+
|
|
293
|
+
this.column = val;
|
|
294
|
+
},
|
|
295
|
+
immediate: true,
|
|
296
|
+
deep: true,
|
|
297
|
+
},
|
|
298
|
+
},
|
|
256
299
|
}
|
|
257
300
|
</script>
|
|
258
301
|
<style lang="less" scoped>
|
|
@@ -260,10 +303,12 @@ export default {
|
|
|
260
303
|
background-color: #fff;
|
|
261
304
|
height: 100%;
|
|
262
305
|
}
|
|
306
|
+
|
|
263
307
|
.pagination-layout {
|
|
264
308
|
text-align: right;
|
|
265
309
|
height: 35px;
|
|
266
310
|
}
|
|
311
|
+
|
|
267
312
|
/deep/ .el-table td.el-table__cell {
|
|
268
313
|
border-right: none;
|
|
269
314
|
}
|