场景:
项目信息中,总项目需要获取子项目的所有备注信息进行汇总
JS写法:
let vm = document.getElementsByName("online-form")[0].__vue__;
//子表
vm.$watch('data.jzbzfzdzbzd.sub_zbzdzfz',function(newVal,oldVal){
let arraya = data.jzbzfzdzbzd.sub_zbzdzfz;
if(arraya && arraya.length>0){
let sy = "";
for(var i=0;i<arraya.length;i++){
if(""!=data.jzbzfzdzbzd.sub_zbzdzfz[i].xmbz){
if(i!=0){
sy+=",";
}
sy+=data.jzbzfzdzbzd.sub_zbzdzfz[i].xmbz;
}
}
data.jzbzfzdzbzd.xmbz = sy;
}
},{ deep:true});
demo数据结构参考:
{ "jzbzfzdzbzd": { "xmbz": "编号:12544,编号:13258", "xmm": "矿产集团管理平台搭建总项目", "xmjl": "", "sub_zbzdzfz": [ { "xmmc": "山西分部项目", "xmbz": "编号:12544", "xmjl": "", "sub_guid": "8e9e5638-7c97-42dc-ad40-718979f470fb" }, { "xmmc": "邢台分部项目", "xmbz": "编号:13258", "xmjl": "", "sub_guid": "5b59704a-db31-4300-ba63-7ddfe6658fb6" } ], "initData": { "zbzdzfz": { "xmmc": null, "xmbz": null, "xmjl": null } } } }
补充其他写法:
let vm = document.getElementsByName("online-form")[0].__vue__;
vm.$watch('data.ccsqmx.sub_ccsqjtmxb', (newVal, oldVal) => {
handleJoinGwcode(newVal);
handleJoinJplx(newVal);
}, {
immediate: true,
deep: true
})
function handleJoinGwcode(newVal) {
vm.data.ccsqmx.txrdwb = newVal.map(item => {
return item.gwcode
}).join(",")
}
function handleJoinJplx(newVal){
vm.data.ccsqmx.gnwjpdwb = newVal.map(item => {
return item.jtlb//子表字段别名
}).unique().join(",")//汇总信息并过滤重复内容
}