vue生成初始化名字相近的变量并放到数组中
项目上有一个需求，页面上有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 },
