w-table-vue 1.0.21 → 1.0.23

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.
Files changed (44) hide show
  1. package/README.md +1 -1
  2. package/dist/w-table-vue.umd.js +3 -3
  3. package/dist/w-table-vue.umd.js.map +1 -1
  4. package/docs/examples/app.html +1 -1
  5. package/docs/examples/app.umd.js +2 -2
  6. package/docs/examples/app.umd.js.map +1 -1
  7. package/docs/examples/w-table-edit_default.html +18 -1
  8. package/docs/examples/w-table-edit_editable.html +18 -1
  9. package/docs/examples/w-table-edit_editable_checkId.html +18 -1
  10. package/docs/examples/w-table-edit_editable_checkId_opt.modifyDataWhenSave_save(call cmp. method).html +18 -1
  11. package/docs/examples/w-table-edit_editable_checkId_successMsgFromAddRow_errorMsgFromAddRow.html +18 -1
  12. package/docs/examples/w-table-edit_editable_enableDownloadWhenNoRows_tooltipDownloadExcelFileForHead_useHeadWhenDownload.html +570 -0
  13. package/docs/examples/w-table-edit_editable_inforPaddingStyle_menuBackgroundColor.html +18 -1
  14. package/docs/examples/w-table-edit_editable_language_checkId_tooltipAddRow.html +18 -1
  15. package/docs/examples/w-table-edit_editable_language_textLabelDataName_textPlaceholderDataName.html +18 -1
  16. package/docs/examples/w-table-edit_editable_no enableInfor.html +18 -1
  17. package/docs/examples/w-table-edit_editable_no enableMenu.html +18 -1
  18. package/docs/examples/w-table-edit_editable_opt.beforeAddRow.html +18 -1
  19. package/docs/examples/w-table-edit_editable_opt.kpCellFormat_no useCellFormatWhenDownload.html +18 -1
  20. package/docs/examples/w-table-edit_editable_opt.kpConvertKeysWhenUploadData.html +18 -1
  21. package/docs/examples/w-table-edit_editable_opt.optForUploadData.html +18 -1
  22. package/docs/examples/w-table-edit_editable_opt.optForUploadData.uploadMode (append, no popup).html +18 -1
  23. package/docs/examples/w-table-edit_editable_slot btns-right.html +18 -1
  24. package/docs/examples/w-table-edit_fixIds (fix id).html +18 -1
  25. package/docs/examples/w-table-edit_hideIds (hide mappingId).html +18 -1
  26. package/docs/examples/w-table-edit_name_description.html +18 -1
  27. package/docs/examples/w-table-edit_no enableInfor.html +18 -1
  28. package/docs/examples/w-table-edit_no enableMenu.html +18 -1
  29. package/docs/examples/w-table-edit_opt.kpCellFormat.html +18 -1
  30. package/docs/examples/w-table-edit_opt.kpHead.html +18 -1
  31. package/docs/examples/w-table-edit_removeIdsWhenDownload (remove id, mappingId, order, isActive).html +18 -1
  32. package/docs/examples/w-table-edit_slot btns-left.html +18 -1
  33. package/docs/examples/w-table-edit_slot btns-right.html +18 -1
  34. package/docs/examples/w-table-edit_slot cell-render.html +18 -1
  35. package/docs/examples/w-table-edit_slot cell-tooltip.html +18 -1
  36. package/docs/examples/w-table-edit_slot head-render.html +18 -1
  37. package/docs/examples/w-table-edit_slot head-tooltip.html +18 -1
  38. package/docs/examples/w-table-edit_slot infor (name_description).html +18 -1
  39. package/docs/examples/w-table-edit_sortColIds (sort by order).html +18 -1
  40. package/docs/index.html +1 -1
  41. package/docs/module-WTableEdit.html +33 -9
  42. package/package.json +4 -4
  43. package/src/AppZoneWTableEdit.vue +38 -0
  44. package/src/components/WTableEdit.vue +70 -10
@@ -0,0 +1,570 @@
1
+ <!doctype html>
2
+ <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
3
+ <head>
4
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
5
+ <meta
6
+ name="viewport"
7
+ content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
8
+ />
9
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
10
+ <title>w-table-vue</title>
11
+
12
+ <!-- @babel/polyfill -->
13
+ <script
14
+ nomodule
15
+ src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
16
+ ></script>
17
+
18
+ <!-- vue -->
19
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
20
+
21
+ <!-- extractHtml已自動添加@babel/polyfill與vue -->
22
+
23
+ <!-- fontawesome -->
24
+ <link
25
+ href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
26
+ rel="stylesheet"
27
+ />
28
+
29
+ <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
30
+ <link
31
+ href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"
32
+ rel="stylesheet"
33
+ />
34
+
35
+ <!-- google, 各組件使用mdi/js故不需引用 -->
36
+ <link
37
+ _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
38
+ rel="stylesheet"
39
+ />
40
+ <link
41
+ _href="https://fonts.googleapis.com/css?family=Material+Icons"
42
+ rel="stylesheet"
43
+ />
44
+
45
+ <!-- w-table-vue -->
46
+ <script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.23/dist/w-table-vue.umd.js"></script>
47
+
48
+ <style>
49
+ .item {
50
+ /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
51
+ border-left: 3px solid #ffba75;
52
+ margin: 5px 5px 8px 0px;
53
+ padding: 3px 3px 5px 10px;
54
+ font-size: 0.9rem;
55
+ display: flex;
56
+ justify-content: flex-start;
57
+ align-items: center;
58
+ }
59
+ .head1 {
60
+ padding: 0px 0px 20px 0px;
61
+ font-size: 2.5rem;
62
+ }
63
+ .bkh {
64
+ /* 寬 */
65
+ padding: 20px;
66
+ }
67
+ @media screen and (max-width: 800px) {
68
+ /* 中 */
69
+ .bkh {
70
+ padding: 10px;
71
+ }
72
+ }
73
+ @media screen and (max-width: 400px) {
74
+ /* 窄 */
75
+ .bkh {
76
+ padding: 5px;
77
+ }
78
+ }
79
+ .bk {
80
+ /* 寬 */
81
+ display: inline-block;
82
+ vertical-align: top;
83
+ padding: 0px 80px 60px 0px;
84
+ }
85
+ @media screen and (max-width: 1000px) {
86
+ /* 中窄 */
87
+ .bk {
88
+ display: block;
89
+ padding: 0px 0px 50px 0px;
90
+ }
91
+ }
92
+ </style>
93
+ </head>
94
+ <body
95
+ style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
96
+ >
97
+ <div id="app" class="bkh" style>
98
+ <div class="head1">
99
+ <span
100
+ style="cursor:pointer;"
101
+ title="open for copy link to view component"
102
+ onclick="window.open('//yuda-lyu.github.io/w-table-vue/examples/app.html?cmp='+this.innerText,'_blank')"
103
+ >w-table-edit</span>
104
+ </div>
105
+ <div class="bk">
106
+ <div
107
+ class="item"
108
+ >editable &amp; enableDownloadWhenNoRows &amp; tooltipDownloadExcelFileForHead &amp; useHeadWhenDownload &amp; opt.kpConvertKeysWhenUploadData</div>
109
+
110
+ <w-table-edit
111
+ style="width:600px; height:400px;"
112
+ :name="WTableEdit.name"
113
+ :description="WTableEdit.description"
114
+ :opt="WTableEdit.opt10"
115
+ :editable="true"
116
+ :enable-download-when-no-rows="true"
117
+ :tooltip-download-excel-file-for-head="'下載表頭範本'"
118
+ :use-head-when-download="true"
119
+ @success="evSuccess"
120
+ @error="evError"
121
+ ></w-table-edit>
122
+ </div>
123
+ </div>
124
+
125
+ <script>
126
+ //install
127
+ Vue.use(window["w-table-vue"]);
128
+
129
+ //initialize
130
+ new Vue({
131
+ el: "#app",
132
+
133
+ data: function() {
134
+ let keys1 = ["make", "model", "price"];
135
+ let kpHeadFilterType1 = {
136
+ //default: num (num,text,time,set)
137
+ make: "text",
138
+ model: "text",
139
+ price: "num"
140
+ };
141
+ let rows1 = [
142
+ { make: "Toyota", model: "Celica", price: 35000 },
143
+ { make: "Ford", model: "Mondeo", price: 32000 },
144
+ { make: "Porsche", model: "Boxter", price: 72000 },
145
+ { make: "BMW", model: "Sedan", price: 66000 },
146
+ { make: "Nissan", model: "March", price: 61000 },
147
+ { make: "Lexus", model: "RX", price: 56000 },
148
+ { make: "Audi", model: "A6 Allroad", price: 45000 },
149
+ { make: "Mazda", model: "MX-5", price: 36000 },
150
+ { make: "Mercedes-Benz", model: "Cabriolet", price: 86000 },
151
+ { make: "Volkswagen", model: "Beetle", price: 68000 },
152
+ { make: "Honda", model: "City", price: 69000 },
153
+ { make: "Volvo", model: "S60", price: 71000 },
154
+ { make: "Subaru", model: "BRZ", price: 48000 }
155
+ ];
156
+ let keys2 = [
157
+ "id",
158
+ "mappingId",
159
+ "order",
160
+ "make",
161
+ "model",
162
+ "price",
163
+ "isActive"
164
+ ];
165
+ let kpHeadFilterType2 = {
166
+ //default: num (num,text,time,set)
167
+ id: "text",
168
+ mappingId: "text",
169
+ order: "num",
170
+ make: "text",
171
+ model: "text",
172
+ price: "num",
173
+ isActive: "text"
174
+ };
175
+ let rows2 = [
176
+ {
177
+ id: "id-Toyota",
178
+ mappingId: "car_table",
179
+ order: 0,
180
+ make: "Toyota",
181
+ model: "Celica",
182
+ price: 35000,
183
+ isActive: "y"
184
+ },
185
+ {
186
+ id: "id-Ford",
187
+ mappingId: "car_table",
188
+ order: 1,
189
+ make: "Ford",
190
+ model: "Mondeo",
191
+ price: 32000,
192
+ isActive: "y"
193
+ },
194
+ {
195
+ id: "id-Porsche",
196
+ mappingId: "car_table",
197
+ order: 2,
198
+ make: "Porsche",
199
+ model: "Boxter",
200
+ price: 72000,
201
+ isActive: "y"
202
+ },
203
+ {
204
+ id: "id-BMW",
205
+ mappingId: "car_table",
206
+ order: 11,
207
+ make: "BMW",
208
+ model: "Sedan",
209
+ price: 66000,
210
+ isActive: "y"
211
+ },
212
+ {
213
+ id: "id-Nissan",
214
+ mappingId: "car_table",
215
+ order: 8,
216
+ make: "Nissan",
217
+ model: "March",
218
+ price: 61000,
219
+ isActive: "y"
220
+ },
221
+ {
222
+ id: "id-Lexus",
223
+ mappingId: "car_table",
224
+ order: 4,
225
+ make: "Lexus",
226
+ model: "RX",
227
+ price: 56000,
228
+ isActive: "y"
229
+ },
230
+ {
231
+ id: "id-Audi",
232
+ mappingId: "car_table",
233
+ order: 5,
234
+ make: "Audi",
235
+ model: "A6 Allroad",
236
+ price: 45000,
237
+ isActive: "y"
238
+ },
239
+ {
240
+ id: "id-Mazda",
241
+ mappingId: "car_table",
242
+ order: 6,
243
+ make: "Mazda",
244
+ model: "MX-5",
245
+ price: 36000,
246
+ isActive: "y"
247
+ },
248
+ {
249
+ id: "id-Mercedes",
250
+ mappingId: "car_table",
251
+ order: 7,
252
+ make: "Mercedes-Benz",
253
+ model: "Cabriolet",
254
+ price: 86000,
255
+ isActive: "y"
256
+ },
257
+ {
258
+ id: "id-Volkswagen",
259
+ mappingId: "car_table",
260
+ order: 9,
261
+ make: "Volkswagen",
262
+ model: "Beetle",
263
+ price: 68000,
264
+ isActive: "y"
265
+ },
266
+ {
267
+ id: "id-Honda",
268
+ mappingId: "car_table",
269
+ order: 10,
270
+ make: "Honda",
271
+ model: "City",
272
+ price: 69000,
273
+ isActive: "y"
274
+ },
275
+ {
276
+ id: "id-Volvo",
277
+ mappingId: "car_table",
278
+ order: 12,
279
+ make: "Volvo",
280
+ model: "S60",
281
+ price: 71000,
282
+ isActive: "y"
283
+ },
284
+ {
285
+ id: "id-Subaru",
286
+ mappingId: "car_table",
287
+ order: 3,
288
+ make: "Subaru",
289
+ model: "BRZ",
290
+ price: 48000,
291
+ isActive: "y"
292
+ }
293
+ ];
294
+ let keys3 = [
295
+ "id",
296
+ "mappingId",
297
+ "order",
298
+ "make",
299
+ "model",
300
+ "price",
301
+ "isActive"
302
+ ];
303
+ let kpHeadFilterType3 = {
304
+ //default: num (num,text,time,set)
305
+ id: "text",
306
+ mappingId: "text",
307
+ order: "num",
308
+ make: "text",
309
+ model: "text",
310
+ price: "num",
311
+ isActive: "text"
312
+ };
313
+ let rows3 = [
314
+ {
315
+ id: "",
316
+ mappingId: "",
317
+ order: 0,
318
+ make: "Toyota",
319
+ model: "Celica",
320
+ price: 35000
321
+ },
322
+ {
323
+ id: "",
324
+ mappingId: "",
325
+ order: 1,
326
+ make: "Ford",
327
+ model: "Mondeo",
328
+ price: 32000
329
+ },
330
+ {
331
+ id: "",
332
+ mappingId: "",
333
+ order: 2,
334
+ make: "Porsche",
335
+ model: "Boxter",
336
+ price: 72000
337
+ },
338
+ {
339
+ id: "",
340
+ mappingId: "",
341
+ order: 11,
342
+ make: "BMW",
343
+ model: "Sedan",
344
+ price: 66000
345
+ },
346
+ {
347
+ id: "",
348
+ mappingId: "",
349
+ order: 8,
350
+ make: "Nissan",
351
+ model: "March",
352
+ price: 61000
353
+ },
354
+ {
355
+ id: "",
356
+ mappingId: "",
357
+ order: 4,
358
+ make: "Lexus",
359
+ model: "RX",
360
+ price: 56000
361
+ },
362
+ {
363
+ id: "",
364
+ mappingId: "",
365
+ order: 5,
366
+ make: "Audi",
367
+ model: "A6 Allroad",
368
+ price: 45000
369
+ },
370
+ {
371
+ id: "",
372
+ mappingId: "",
373
+ order: 6,
374
+ make: "Mazda",
375
+ model: "MX-5",
376
+ price: 36000
377
+ },
378
+ {
379
+ id: "",
380
+ mappingId: "",
381
+ order: 7,
382
+ make: "Mercedes-Benz",
383
+ model: "Cabriolet",
384
+ price: 86000
385
+ },
386
+ {
387
+ id: "",
388
+ mappingId: "",
389
+ order: 9,
390
+ make: "Volkswagen",
391
+ model: "Beetle",
392
+ price: 68000
393
+ },
394
+ {
395
+ id: "",
396
+ mappingId: "",
397
+ order: 10,
398
+ make: "Honda",
399
+ model: "City",
400
+ price: 69000
401
+ },
402
+ {
403
+ id: "",
404
+ mappingId: "",
405
+ order: 12,
406
+ make: "Volvo",
407
+ model: "S60",
408
+ price: 71000
409
+ },
410
+ {
411
+ id: "",
412
+ mappingId: "",
413
+ order: 3,
414
+ make: "Subaru",
415
+ model: "BRZ",
416
+ price: 48000
417
+ }
418
+ ];
419
+ return {
420
+ WTableEdit: {
421
+ name: "Car Price",
422
+ description:
423
+ "The relationship between different car types and prices",
424
+ opt1: {
425
+ keys: keys1,
426
+ kpHeadFilterType: kpHeadFilterType1,
427
+ rows: rows1
428
+ },
429
+ opt2: {
430
+ keys: keys2,
431
+ kpHeadFilterType: kpHeadFilterType2,
432
+ rows: rows2
433
+ },
434
+ opt3: {
435
+ keys: keys2,
436
+ kpHeadFilterType: kpHeadFilterType2,
437
+ rows: rows2,
438
+ kpHead: {
439
+ id: "主鍵",
440
+ mappingId: "所屬主鍵",
441
+ order: "順序",
442
+ make: "Ecirp",
443
+ model: "Ledom",
444
+ price: "Ecirp",
445
+ isActive: "有效"
446
+ }
447
+ },
448
+ opt4: {
449
+ keys: keys2,
450
+ kpHeadFilterType: kpHeadFilterType2,
451
+ rows: rows2,
452
+ beforeAddRow: function(newRow) {
453
+ newRow.id = "id-random-" + Math.random();
454
+ return newRow;
455
+ }
456
+ },
457
+ opt5: {
458
+ keys: keys2,
459
+ kpHeadFilterType: kpHeadFilterType2,
460
+ rows: rows2,
461
+ kpConvertKeysWhenUploadData: {
462
+ makeTemp: "make",
463
+ modelTemp: "model",
464
+ priceTemp: "price"
465
+ }
466
+ },
467
+ opt6: {
468
+ keys: keys2,
469
+ rows: rows2,
470
+ optForUploadData: {
471
+ //input for uploadData in w-aggrid-vue, https://github.com/yuda-lyu/w-aggrid-vue
472
+ beforeUpload: null,
473
+ parseSheetInd: 1 //取第2個sheet, 預設0(取第1個sheet)
474
+ }
475
+ },
476
+ opt7: {
477
+ keys: keys3,
478
+ kpHeadFilterType: kpHeadFilterType3,
479
+ rows: rows3,
480
+ modifyDataWhenSave: function(rows) {
481
+ console.log("modifyDataWhenSave", rows);
482
+ for (let k = 0; k < rows.length; k++) {
483
+ let v = rows[k];
484
+ v.id = "id-random-" + Math.random();
485
+ v.mappingId = "auto_car_table";
486
+ v.order = k;
487
+ v.isActive = "y";
488
+ }
489
+ return rows;
490
+ }
491
+ },
492
+ opt8: {
493
+ keys: keys1,
494
+ kpHeadFilterType: kpHeadFilterType1,
495
+ rows: rows1,
496
+ kpCellFormat: {
497
+ //格式化僅影響顯示與下載, 排序、過濾、編輯與save回傳之rows仍為原值
498
+ make: function(value, key, row, params) {
499
+ //空值(null、undefined、空字串)會原樣傳入, 編輯模式新增列之各欄為空字串, 回傳null代表不格式化維持原值
500
+ if (value === null || value === undefined || value === "") {
501
+ return null;
502
+ }
503
+ return String(value).toUpperCase();
504
+ },
505
+ price: function(value, key, row, params) {
506
+ //空值不可直接Number(), 否則''與null會變成0.00
507
+ if (value === null || value === undefined || value === "") {
508
+ return null;
509
+ }
510
+ return Number(value).toLocaleString("en-US", {
511
+ minimumFractionDigits: 2,
512
+ maximumFractionDigits: 2
513
+ });
514
+ }
515
+ }
516
+ },
517
+ opt9: {
518
+ keys: keys1,
519
+ kpHeadFilterType: kpHeadFilterType1,
520
+ rows: rows1,
521
+ optForUploadData: {
522
+ uploadMode: "append" //預先指定上傳模式, 點擊上傳按鈕時不顯示模式選擇彈窗, 直接開啟選檔視窗並附加於表格數據之後
523
+ }
524
+ },
525
+ opt10: {
526
+ keys: keys1,
527
+ kpHeadFilterType: kpHeadFilterType1,
528
+ kpHead: {
529
+ //表頭名稱須非空且不重複, 才能由kpConvertKeysWhenUploadData對回欄位鍵值
530
+ make: "製造商",
531
+ model: "型號",
532
+ price: "價格"
533
+ },
534
+ kpConvertKeysWhenUploadData: {
535
+ //kpHead之反向對照, 使下載之表頭範本填寫後可上傳回來
536
+ 製造商: "make",
537
+ 型號: "model",
538
+ 價格: "price"
539
+ },
540
+ rows: [] //無數據列, 開啟enableDownloadWhenNoRows時仍可下載只有表頭之Excel檔案
541
+ }
542
+ },
543
+ actions: []
544
+ };
545
+ },
546
+ mounted: function() {
547
+ return {};
548
+ },
549
+ computed: {},
550
+ methods: {
551
+ evSuccess: function(msg) {
552
+ console.log("evSuccess:", msg);
553
+ },
554
+ evError: function(msg) {
555
+ console.log("evError:", msg);
556
+ },
557
+ saveData: function() {
558
+ let data = this.$refs.table.save();
559
+ document.querySelector("#disp-save-data").innerHTML = JSON.stringify(
560
+ data,
561
+ null,
562
+ 2
563
+ );
564
+ console.log("saveData:", data);
565
+ }
566
+ }
567
+ });
568
+ </script>
569
+ </body>
570
+ </html>
@@ -43,7 +43,7 @@
43
43
  />
44
44
 
45
45
  <!-- w-table-vue -->
46
- <script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.21/dist/w-table-vue.umd.js"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.23/dist/w-table-vue.umd.js"></script>
47
47
 
48
48
  <style>
49
49
  .item {
@@ -522,6 +522,23 @@
522
522
  optForUploadData: {
523
523
  uploadMode: "append" //預先指定上傳模式, 點擊上傳按鈕時不顯示模式選擇彈窗, 直接開啟選檔視窗並附加於表格數據之後
524
524
  }
525
+ },
526
+ opt10: {
527
+ keys: keys1,
528
+ kpHeadFilterType: kpHeadFilterType1,
529
+ kpHead: {
530
+ //表頭名稱須非空且不重複, 才能由kpConvertKeysWhenUploadData對回欄位鍵值
531
+ make: "製造商",
532
+ model: "型號",
533
+ price: "價格"
534
+ },
535
+ kpConvertKeysWhenUploadData: {
536
+ //kpHead之反向對照, 使下載之表頭範本填寫後可上傳回來
537
+ 製造商: "make",
538
+ 型號: "model",
539
+ 價格: "price"
540
+ },
541
+ rows: [] //無數據列, 開啟enableDownloadWhenNoRows時仍可下載只有表頭之Excel檔案
525
542
  }
526
543
  },
527
544
  actions: []
@@ -43,7 +43,7 @@
43
43
  />
44
44
 
45
45
  <!-- w-table-vue -->
46
- <script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.21/dist/w-table-vue.umd.js"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.23/dist/w-table-vue.umd.js"></script>
47
47
 
48
48
  <style>
49
49
  .item {
@@ -528,6 +528,23 @@
528
528
  optForUploadData: {
529
529
  uploadMode: "append" //預先指定上傳模式, 點擊上傳按鈕時不顯示模式選擇彈窗, 直接開啟選檔視窗並附加於表格數據之後
530
530
  }
531
+ },
532
+ opt10: {
533
+ keys: keys1,
534
+ kpHeadFilterType: kpHeadFilterType1,
535
+ kpHead: {
536
+ //表頭名稱須非空且不重複, 才能由kpConvertKeysWhenUploadData對回欄位鍵值
537
+ make: "製造商",
538
+ model: "型號",
539
+ price: "價格"
540
+ },
541
+ kpConvertKeysWhenUploadData: {
542
+ //kpHead之反向對照, 使下載之表頭範本填寫後可上傳回來
543
+ 製造商: "make",
544
+ 型號: "model",
545
+ 價格: "price"
546
+ },
547
+ rows: [] //無數據列, 開啟enableDownloadWhenNoRows時仍可下載只有表頭之Excel檔案
531
548
  }
532
549
  },
533
550
  actions: []
@@ -43,7 +43,7 @@
43
43
  />
44
44
 
45
45
  <!-- w-table-vue -->
46
- <script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.21/dist/w-table-vue.umd.js"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.23/dist/w-table-vue.umd.js"></script>
47
47
 
48
48
  <style>
49
49
  .item {
@@ -523,6 +523,23 @@
523
523
  optForUploadData: {
524
524
  uploadMode: "append" //預先指定上傳模式, 點擊上傳按鈕時不顯示模式選擇彈窗, 直接開啟選檔視窗並附加於表格數據之後
525
525
  }
526
+ },
527
+ opt10: {
528
+ keys: keys1,
529
+ kpHeadFilterType: kpHeadFilterType1,
530
+ kpHead: {
531
+ //表頭名稱須非空且不重複, 才能由kpConvertKeysWhenUploadData對回欄位鍵值
532
+ make: "製造商",
533
+ model: "型號",
534
+ price: "價格"
535
+ },
536
+ kpConvertKeysWhenUploadData: {
537
+ //kpHead之反向對照, 使下載之表頭範本填寫後可上傳回來
538
+ 製造商: "make",
539
+ 型號: "model",
540
+ 價格: "price"
541
+ },
542
+ rows: [] //無數據列, 開啟enableDownloadWhenNoRows時仍可下載只有表頭之Excel檔案
526
543
  }
527
544
  },
528
545
  actions: []
@@ -43,7 +43,7 @@
43
43
  />
44
44
 
45
45
  <!-- w-table-vue -->
46
- <script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.21/dist/w-table-vue.umd.js"></script>
46
+ <script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.23/dist/w-table-vue.umd.js"></script>
47
47
 
48
48
  <style>
49
49
  .item {
@@ -517,6 +517,23 @@
517
517
  optForUploadData: {
518
518
  uploadMode: "append" //預先指定上傳模式, 點擊上傳按鈕時不顯示模式選擇彈窗, 直接開啟選檔視窗並附加於表格數據之後
519
519
  }
520
+ },
521
+ opt10: {
522
+ keys: keys1,
523
+ kpHeadFilterType: kpHeadFilterType1,
524
+ kpHead: {
525
+ //表頭名稱須非空且不重複, 才能由kpConvertKeysWhenUploadData對回欄位鍵值
526
+ make: "製造商",
527
+ model: "型號",
528
+ price: "價格"
529
+ },
530
+ kpConvertKeysWhenUploadData: {
531
+ //kpHead之反向對照, 使下載之表頭範本填寫後可上傳回來
532
+ 製造商: "make",
533
+ 型號: "model",
534
+ 價格: "price"
535
+ },
536
+ rows: [] //無數據列, 開啟enableDownloadWhenNoRows時仍可下載只有表頭之Excel檔案
520
537
  }
521
538
  },
522
539
  actions: []