场景:
填写费用报销时,不同的费用科目对应不同的子表,申请页面的效果可以通过复选框联动的功能来控制,可是待办和已办页面并不会加载联动的效果,只能全部展示或全部隐藏,如何只看关键信息呢?
我们可以通过JS来控制:只显示有数据的子表,没有任何数据的子表默认隐藏。
JS写法1 控制全部:
let onlineForm = document.querySelector("[name='online-form']").__vue__;
for(let key in onlineForm.permission.table){
let subTabData = onlineForm.data.bxdj[`sub_${key}`];
let onlineForm.permission.table.hidden = true;
if(subTabData.length == 0 && !onlineForm.permission.table[key].add){
onlineForm.permission.table[key].hidden = true;
} else {
onlineForm.permission.table[key].hidden = false;
}
}
场景2:
通过下拉框控制子表的显示与隐藏:
下拉框:SUBIN 选择“是”:子表显示并默认展示一行,subin选择否:子表隐藏
let this_=$("[name='online-form']")[0].__vue__;
this_.permission.table.yqsbjfqk.hidden = true;
this_.$watch('data.htbd.subin', function (newvalue,oldvalue) {
if(newvalue !== oldvalue){
if(newvalue == '是'){
this_.permission.table.yqsbjfqk.hidden = false;
if(data.htbd.sub_yqsbjfqk.length == 0){
data.htbd.sub_yqsbjfqk.push({})
}
}
else if(newvalue == '否') {
this_.permission.table.yqsbjfqk.hidden = true;
}
}
}
,{deep:true})
场景3:
完全通过JS实现通过复选框控制子表的显示与隐藏
JS写法:
let this_=$("[name='online-form']")[0].__vue__;
//先把所有子表隐藏
function hiddenAll(){
for(let key in this_.permission.table){
this_.permission.table[key].hidden=true;
}
}
hiddenAll();
var typeMap = new Map();
typeMap.set('1', 'clf');
typeMap.set('2', 'snjt');
typeMap.set('3', 'xmtj');
typeMap.set('4', 'ygfl');
typeMap.set('5', 'khzdf');
typeMap.set('6', 'dyf');
typeMap.set('7', 'bgf');
typeMap.set('8', 'qt');
this_.$watch('data.bxdj.F_fylb', function (newValue, oldValue) {
hiddenAll();
if(newValue != oldValue){
if(oldValue && oldValue.length>newValue.length){
let oldValues=oldValue.split(',');
oldValues.forEach(oldv => {
if(newValue.indexOf(oldv) == -1){
console.log(oldv);
this_.data.bxdj["sub_"+typeMap.get(oldv)].length=0
}
});
}
if(newValue.indexOf("1") != -1){
this_.permission.table[typeMap.get('1')].hidden = false;
}
if(newValue.indexOf("2") != -1){
this_.permission.table[typeMap.get('2')].hidden = false;
}
if(newValue.indexOf("3") != -1){
this_.permission.table[typeMap.get('3')].hidden = false;
}
if(newValue.indexOf("4") != -1){
this_.permission.table[typeMap.get('4')].hidden = false;
}
if(newValue.indexOf("5") != -1){
this_.permission.table[typeMap.get('5')].hidden = false;
}
if(newValue.indexOf("6") != -1){
this_.permission.table[typeMap.get('6')].hidden = false;
}
if(newValue.indexOf("7") != -1){
this_.permission.table[typeMap.get('7')].hidden = false;
}
if(newValue.indexOf("8") != -1){
this_.permission.table[typeMap.get('8')].hidden = false;
}
}
},{deep:true})