gyyg-components 0.2.19 → 0.2.21
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
|
@@ -77,10 +77,21 @@ export default {
|
|
|
77
77
|
},
|
|
78
78
|
options: {
|
|
79
79
|
handler: function (val) {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
80
|
+
if (!Array.isArray(this.options) && this.options) {
|
|
81
|
+
if(this.options instanceof Promise) {
|
|
82
|
+
this.options.then(val => {
|
|
83
|
+
this.option = val.data || val;
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
if(typeof this.options == 'function') {
|
|
87
|
+
this.options().then(val => {
|
|
88
|
+
this.option = val.data || val;
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
} else {
|
|
93
|
+
this.option = this.options;
|
|
94
|
+
}
|
|
84
95
|
},
|
|
85
96
|
deep: true,
|
|
86
97
|
immediate: true,
|
|
@@ -98,23 +109,6 @@ export default {
|
|
|
98
109
|
this.$emit('clear')
|
|
99
110
|
}
|
|
100
111
|
},
|
|
101
|
-
mounted() {
|
|
102
|
-
if (!Array.isArray(this.options) && this.options) {
|
|
103
|
-
if(this.options instanceof Promise) {
|
|
104
|
-
this.options.then(val => {
|
|
105
|
-
this.option = val.data || val;
|
|
106
|
-
});
|
|
107
|
-
}
|
|
108
|
-
if(typeof this.options == 'function') {
|
|
109
|
-
this.options().then(val => {
|
|
110
|
-
this.option = val.data || val;
|
|
111
|
-
});
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
} else {
|
|
115
|
-
this.option = this.options;
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
112
|
};
|
|
119
113
|
</script>
|
|
120
114
|
|
|
@@ -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,33 +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
|
-
v-if="page"
|
|
92
134
|
@size-change="handleSizeChange"
|
|
93
135
|
@current-change="handleCurrentChange"
|
|
94
136
|
:page-sizes="[10, 20, 30, 50]"
|
|
95
|
-
|
|
96
|
-
|
|
137
|
+
:page-size="page.pageSize"
|
|
138
|
+
:current-page="page.currentPage"
|
|
97
139
|
layout="total, sizes, prev, pager, next, jumper"
|
|
98
|
-
|
|
140
|
+
:total="page.totalRecords"
|
|
99
141
|
></el-pagination>
|
|
100
|
-
|
|
142
|
+
</div>
|
|
101
143
|
</div>
|
|
102
144
|
</template>
|
|
103
145
|
<script>
|
|
@@ -118,8 +160,8 @@ export default {
|
|
|
118
160
|
},
|
|
119
161
|
// 表格列
|
|
120
162
|
columns: {
|
|
121
|
-
|
|
122
|
-
|
|
163
|
+
required: true,
|
|
164
|
+
},
|
|
123
165
|
// 表格高度
|
|
124
166
|
height: {
|
|
125
167
|
required: false
|
|
@@ -130,24 +172,24 @@ export default {
|
|
|
130
172
|
},
|
|
131
173
|
// 是否显示多选框
|
|
132
174
|
selection: {
|
|
133
|
-
|
|
134
|
-
|
|
175
|
+
required: false,
|
|
176
|
+
},
|
|
135
177
|
// 是否保留多选框
|
|
136
178
|
reserveSelection: {
|
|
137
|
-
|
|
179
|
+
type: Boolean,
|
|
138
180
|
default: false
|
|
139
181
|
},
|
|
140
182
|
// 分页
|
|
141
183
|
page: {
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
184
|
+
// 分页
|
|
185
|
+
required: false,
|
|
186
|
+
},
|
|
145
187
|
// 是否高亮当前行
|
|
146
188
|
highlightCurrentRow: {
|
|
147
189
|
required: false,
|
|
148
190
|
},
|
|
149
191
|
// 表头样式
|
|
150
|
-
headerCellStyle:{
|
|
192
|
+
headerCellStyle: {
|
|
151
193
|
required: false,
|
|
152
194
|
default: () => {
|
|
153
195
|
return {
|
|
@@ -157,26 +199,26 @@ export default {
|
|
|
157
199
|
},
|
|
158
200
|
// 行数据的key
|
|
159
201
|
rowKey: {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
202
|
+
type: [String, Number],
|
|
203
|
+
default: 'id',
|
|
204
|
+
},
|
|
163
205
|
// 行className回调
|
|
164
|
-
tableRowClassName:{
|
|
206
|
+
tableRowClassName: {
|
|
165
207
|
type: [Function, String],
|
|
166
208
|
required: false,
|
|
167
209
|
},
|
|
168
210
|
// 展开行的key
|
|
169
211
|
expandRowKeys: {
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
212
|
+
type: Array,
|
|
213
|
+
required: false,
|
|
214
|
+
},
|
|
173
215
|
// 嵌套数据的配置选项
|
|
174
216
|
treeProps: {
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
217
|
+
type: Object,
|
|
218
|
+
default: () => {
|
|
219
|
+
return {};
|
|
220
|
+
},
|
|
221
|
+
},
|
|
180
222
|
// 是否默认展开所有行
|
|
181
223
|
defaultExpandAll: {
|
|
182
224
|
default: false,
|
|
@@ -198,41 +240,41 @@ export default {
|
|
|
198
240
|
},
|
|
199
241
|
methods: {
|
|
200
242
|
// 列表选中当前行字体加粗
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
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
|
+
},
|
|
207
249
|
// pageSize 改变时会触发
|
|
208
250
|
handleSizeChange(val) {
|
|
209
251
|
this.$emit('page-size-change', val);
|
|
210
252
|
},
|
|
211
253
|
// // currentPage 改变时会触发
|
|
212
254
|
handleCurrentChange(val) {
|
|
213
|
-
|
|
214
|
-
|
|
255
|
+
this.$emit('page-change', val);
|
|
256
|
+
},
|
|
215
257
|
// 表格属性回调
|
|
216
258
|
currentChange(val) {
|
|
217
259
|
this.$emit('current-change', val);
|
|
218
260
|
},
|
|
219
261
|
// 排序规则发生变化时会触发
|
|
220
262
|
sortChange(column, prop, order) {
|
|
221
|
-
|
|
222
|
-
|
|
263
|
+
this.$emit('sort-change', column, prop, order);
|
|
264
|
+
},
|
|
223
265
|
// 手动勾选数据行的checkbox时触发的事件
|
|
224
266
|
select(column, row) {
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
267
|
+
let refs = this.$refs.table;
|
|
268
|
+
this.$emit('select', column, row, refs);
|
|
269
|
+
},
|
|
228
270
|
// 选择项发生变化时会触发
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
271
|
+
selectionChange(column) {
|
|
272
|
+
this.multipleSelection = column
|
|
273
|
+
this.$emit('selection-change', column);
|
|
274
|
+
},
|
|
233
275
|
// 行点击触发的事件
|
|
234
276
|
rowClickHandel(column) {
|
|
235
|
-
if(this.toggleRow) {
|
|
277
|
+
if (this.toggleRow) {
|
|
236
278
|
this.$refs.table.clearSelection()
|
|
237
279
|
this.$refs.table.toggleRowSelection(column)
|
|
238
280
|
}
|
|
@@ -245,15 +287,15 @@ export default {
|
|
|
245
287
|
|
|
246
288
|
},
|
|
247
289
|
watch: {
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
290
|
+
columns: {
|
|
291
|
+
handler: function (val) {
|
|
292
|
+
|
|
293
|
+
this.column = val;
|
|
294
|
+
},
|
|
295
|
+
immediate: true,
|
|
296
|
+
deep: true,
|
|
297
|
+
},
|
|
298
|
+
},
|
|
257
299
|
}
|
|
258
300
|
</script>
|
|
259
301
|
<style lang="less" scoped>
|
|
@@ -261,10 +303,12 @@ export default {
|
|
|
261
303
|
background-color: #fff;
|
|
262
304
|
height: 100%;
|
|
263
305
|
}
|
|
306
|
+
|
|
264
307
|
.pagination-layout {
|
|
265
308
|
text-align: right;
|
|
266
309
|
height: 35px;
|
|
267
310
|
}
|
|
311
|
+
|
|
268
312
|
/deep/ .el-table td.el-table__cell {
|
|
269
313
|
border-right: none;
|
|
270
314
|
}
|