專案上有一個需求，頁面上有50、60個資料變數，是依次排序遞增的變數，中間有個別變數用不到，不想把這些變數直接定義在data() { }內。
直接上程式碼
1.在mounted() { }，大括號內定義並初始化變數
1 this.yx_1hddj_arr = []; 2 this.yx_2hddj_arr = []; 3 this.yx_3hddj_arr = []; 4 this.yx_4hddj_arr = []; 5 this.xtAlarm_arr = []; 6 this.xtVehicle_arr = []; 7 this.xtVehicle_task_arr = []; 8 //初始化1#堆垛機 堆垛機列陣列 任務陣列 從3號位開始 到43號位結束 總共41個列位置（2號位為初始0位） 9 for (let i = 2; i <= 43; i++) { 10 if (i == 2) { 11 this.yx_1hddj_arr[`yx_1hddj_` + i] = ddjGreen; 12 this.yx_1hddj_arr[`yx_1hddj_` + i + `_task`] = "出:0"; 13 } else { 14 this.yx_1hddj_arr[`yx_1hddj_` + i] = ""; 15 this.yx_1hddj_arr[`yx_1hddj_` + i + `_task`] = ""; 16 } 17 } 18 //初始化2#堆垛機 堆垛機列陣列 任務陣列 從2號位開始 到29號位結束 總共28個列位置（1號位為初始0位） 19 for (let i = 1; i <= 29; i++) { 20 if (i == 1) { 21 this.yx_2hddj_arr[`yx_2hddj_` + i] = ddjGreen; 22 this.yx_2hddj_arr[`yx_2hddj_` + i + `_task`] = "出:0"; 23 } else { 24 this.yx_2hddj_arr[`yx_2hddj_` + i] = ""; 25 this.yx_2hddj_arr[`yx_2hddj_` + i + `_task`] = ""; 26 } 27 } 28 //初始化3#堆垛機 堆垛機列陣列 任務陣列 從2號位開始 到29號位結束 總共28個列位置（1號位為初始0位） 29 for (let i = 1; i <= 29; i++) { 30 if (i == 1) { 31 this.yx_3hddj_arr[`yx_3hddj_` + i] = ddjGreen; 32 this.yx_3hddj_arr[`yx_3hddj_` + i + `_task`] = "出:0"; 33 } else { 34 this.yx_3hddj_arr[`yx_3hddj_` + i] = ""; 35 this.yx_3hddj_arr[`yx_3hddj_` + i + `_task`] = ""; 36 } 37 } 38 //初始化4#堆垛機 堆垛機列陣列 任務陣列 從2號位開始 到29號位結束 總共28個列位置 （1號位是初始0位） 39 for (let i = 1; i <= 29; i++) { 40 if (i == 1) { 41 this.yx_4hddj_arr[`yx_4hddj_` + i] = ddjGreen; 42 this.yx_4hddj_arr[`yx_4hddj_` + i + `_task`] = "出:0"; 43 } else { 44 this.yx_4hddj_arr[`yx_4hddj_` + i] = ""; 45 this.yx_4hddj_arr[`yx_4hddj_` + i + `_task`] = ""; 46 } 47 } 48 //初始化線體載具 線體任務 線體告警 49 // 1#蟲卵庫線體編號1001~1017 2#幼蟲庫線體編號1018~1040 (生成的線體編號陣列中間有個別用不到的線體編號可以忽略) 50 // 3#成蟲庫 4#成蟲庫 線體編號2001~2067 51 for (let i = 1001; i <= 1040; i++) { 52 this.xtVehicle_arr[`xtVehicle_` + i] = ""; 53 this.xtVehicle_task_arr[`xtVehicle_` + i + `_task`] = ""; 54 this.xtAlarm_arr[`xtAlarm_` + i] = ""; 55 } 56 for (let i = 2001; i <= 2067; i++) { 57 this.xtVehicle_arr[`xtVehicle_` + i] = ""; 58 this.xtVehicle_task_arr[`xtVehicle_` + i + `_task`] = ""; 59 this.xtAlarm_arr[`xtAlarm_` + i] = ""; 60 }
2.在index.vue頁面中使用變數
1 <g> 2 <g> 3 <g> 4 <g> 5 <text 6 transform="matrix(1 0 0 1 541.4 108.6)" 7 class="st11 st2 st18" 8 > 9 {{ yx_1hddj_arr.yx_1hddj_40_task }} 10 </text> 11 </g> 12 </g> 13 </g> 14 </g> 15 <g> 16 <g> 17 <g> 18 <g> 19 <text 20 transform="matrix(1 0 0 1 510.7 109)" 21 class="st11 st2 st18" 22 > 23 {{ yx_1hddj_arr.yx_1hddj_41_task }} 24 </text> 25 </g> 26 </g> 27 </g> 28 </g> 29 <g> 30 <g> 31 <g> 32 <g> 33 <text 34 transform="matrix(1 0 0 1 479.3 107.1)" 35 class="st11 st2 st18" 36 > 37 {{ yx_1hddj_arr.yx_1hddj_42_task }} 38 </text> 39 </g> 40 </g> 41 </g> 42 </g> 43 <g> 44 <g> 45 <g> 46 <g> 47 <text 48 transform="matrix(1 0 0 1 446.1 107.6)" 49 class="st11 st2 st18" 50 > 51 {{ yx_1hddj_arr.yx_1hddj_43_task }} 52 </text> 53 </g> 54 </g> 55 </g> 56 </g>
3.在methods:{ }自定義方法內使用
1 //1#堆垛機 2#堆垛機 3#堆垛機 4#堆垛機 2 var num1ddjObj; 3 var num2ddjObj; 4 var num3ddjObj; 5 var num4ddjObj; 6 //1#蟲卵庫隱藏的列數 7 var num1ddjObjForkHiddenColumn = []; 8 //2#幼蟲庫隱藏的列數 9 var num2ddjObjForkHiddenColumn = []; 10 //3#成蟲庫隱藏的列數 11 var num3ddjObjForkHiddenColumn = []; 12 //4#成蟲庫隱藏的列數 13 var num4ddjObjForkHiddenColumn = [];
1 //2#堆垛機 2 if (dObj.tunnelId == 2) { 3 num2ddjObj = dObj; 4 if (num2ddjObj) { 5 //顯示當前列 frontForkColumn 6 if (num2ddjObj.frontForkColumn != 0) { 7 this.yx_2hddj_arr[`yx_2hddj_` + num2ddjObj.frontForkColumn] = 8 ddjGreen; 9 } else { 10 this.yx_2hddj_arr[yx_1hddj_1] = ddjGreen; 11 } 12 var element = num2ddjObj.frontForkColumn; 13 //隱藏的2#蟲卵庫 列 14 num2ddjObjForkHiddenColumn = piler_2_Change(element); 15 //隱藏的2#蟲卵庫 列 16 for (let i = 0; i < num2ddjObjForkHiddenColumn.length; i++) { 17 this.yx_2hddj_arr[ 18 `yx_2hddj_` + num2ddjObjForkHiddenColumn[i] 19 ] = ""; 20 } 21 //任務號 任務型別+任務號組成 22 var taskNumberStr; 23 //前插 24 var froTaskDto; 25 //後插 26 var baTaskDto; 27 if (num2ddjObj.platform == 1) { 28 froTaskDto = num2ddjObj.frontTaskDto; 29 baTaskDto = num2ddjObj.backTaskDto; 30 taskNumberStr = 31 (froTaskDto.firstType == 1 32 ? "入:" 33 : froTaskDto.firstType == 2 34 ? "出:" 35 : froTaskDto.firstType == 3 36 ? "移:" 37 : froTaskDto.firstType == 4 38 ? "輸送線用:" 39 : froTaskDto.firstType == 5 40 ? "轉運:" 41 : "") + froTaskDto.wcsId; 42 taskNumberStr = 43 taskNumberStr + 44 (baTaskDto.firstType == 1 45 ? "入:" 46 : baTaskDto.firstType == 2 47 ? "出:" 48 : baTaskDto.firstType == 3 49 ? "移:" 50 : baTaskDto.firstType == 4 51 ? "輸送線用:" 52 : baTaskDto.firstType == 5 53 ? "轉運:" 54 : "") + 55 baTaskDto.wcsId; 56 } else { 57 froTaskDto = num2ddjObj.frontTaskDto; 58 taskNumberStr = 59 (froTaskDto.firstType == 1 60 ? "入:" 61 : froTaskDto.firstType == 2 62 ? "出:" 63 : froTaskDto.firstType == 3 64 ? "移:" 65 : froTaskDto.firstType == 4 66 ? "輸送線用:" 67 : froTaskDto.firstType == 5 68 ? "轉運:" 69 : "") + froTaskDto.wcsId; 70 } 71 72 //如果堆垛機有當前列 任務號顯示在對應當前列位置上 沒有當前列 就顯示在堆垛機首個位置 73 if (num2ddjObj.frontForkColumn != 0) { 74 this.yx_2hddj_arr[ 75 `yx_2hddj_` + num2ddjObj.frontForkColumn + `_task` 76 ] = taskNumberStr; 77 } else { 78 this.yx_2hddj_arr[`yx_2hddj_` + 1 + `_task`] = taskNumberStr; 79 } 80 //隱藏的2#幼蟲庫 其他任務號 81 for (let i = 0; i < num2ddjObjForkHiddenColumn.length; i++) { 82 this.yx_2hddj_arr[ 83 `yx_2hddj_` + num2ddjObjForkHiddenColumn[i] + `_task` 84 ] = ""; 85 } 86 } 87 //陣列新增一條記錄刪除一條記錄會更新dom 88 this.yx_2hddj_arr.push("2#"); 89 this.yx_2hddj_arr.pop(); 90 }
4.監視變數更新
1 watch: { 2 yx_4hddj_arr: { 3 handler(val, oldVal) {}, 4 deep: true, 5 }, 6 yx_3hddj_arr: { 7 handler(val, oldVal) {}, 8 deep: true, 9 }, 10 yx_2hddj_arr: { 11 handler(val, oldVal) {}, 12 deep: true, 13 }, 14 yx_1hddj_arr: { 15 handler(val, oldVal) {}, 16 deep: true, 17 }, 18 xtAlarm_arr: { 19 handler(val, oldVal) {}, 20 deep: true, 21 }, 22 xtVehicle_arr: { 23 handler(val, oldVal) {}, 24 deep: true, 25 }, 26 xtVehicle_task_arr: { 27 handler(val, oldVal) {}, 28 deep: true, 29 }, 30 },