用js可以实现 设置子表中某一行的某个字段隐藏与显示
js代码参考:
let vm = document.getElementsByName("online-form")[0].__vue__; let oldPermission = vm.permission.fields.zrzlzb.zrlybz; let oldPermission2 = vm.permission.fields.cgfwmx.wbfl; let oldPermission3 = vm.permission.fields.cgfwmx.wbxqxxsm; vm.$watch('data.gyszrsp.sub_zrzlzb', function (newVal, oldVal) { if (newVal && newVal.length != 0) { vm.permission.fields.zrzlzb.zrlybz = oldPermission; this.$nextTick(() => { handleOtherVal(newVal, vm, oldPermission); }) } }, { deep: true, immediate: true }); vm.$watch('data.gyszrsp.sub_cgfwmx', function (newVal, oldVal) { if (newVal && newVal.length != 0) { vm.permission.fields.cgfwmx.wbxqxxsm = oldPermission3; vm.permission.fields.cgfwmx.wbfl = oldPermission2; this.$nextTick(() => { handleEx(newVal, vm, oldPermission2, oldPermission3); }) }else{ vm.permission.fields.cgfwmx.wbxqxxsm = 'n'; vm.permission.fields.cgfwmx.wbfl = 'n'; } }, { deep: true, immediate: true }); function handleOtherVal(newVal, vm, oldPermission) { let hasOther = false; for (let i = 0; i < newVal.length; i++) { let row = newVal[i]; let subRow = document.querySelector(`[data-subname='data.gyszrsp.sub_zrzlzb'][sub-index='${i}']`); let inputs = subRow.querySelector("[model-name='item.zrlybz']"); if (row.zrly && row.zrly.split(",").includes("其他")) { hasOther = true; if (inputs && inputs.style) { inputs.style.display = ''; } } else { if (inputs && inputs.style) { inputs.style.display = 'none'; row.zrlybz = '' } } } if (!hasOther) { vm.permission.fields.zrzlzb.zrlybz = 'n' } else { vm.permission.fields.zrzlzb.zrlybz = oldPermission; } } //添加的内容 function handleEx(newVal, vm, oldPermission2, oldPermission3) { let hasOther = false; for (let i = 0; i < newVal.length; i++) { let row = newVal[i]; let subRow = document.querySelector(`[data-subname='data.gyszrsp.sub_cgfwmx'][sub-index='${i}']`); let inputsWbfl = subRow.querySelector("[model-name='item.wbfl']"); let inputsWbxqxxsm = subRow.querySelector("[model-name='item.wbxqxxsm']"); if (row.djfl == "外包方") { hasOther = true; if (inputsWbfl && inputsWbfl.style) { inputsWbfl.style.display = ''; } if (inputsWbxqxxsm && inputsWbxqxxsm.style) { inputsWbxqxxsm.style.display = ''; } } else { if (inputsWbfl && inputsWbfl.style) { inputsWbfl.style.display = 'none'; row.wbfl = '' } if (inputsWbxqxxsm && inputsWbxqxxsm.style) { inputsWbxqxxsm.style.display = 'none'; row.wbxqxxsm = '' } } } if (!hasOther) { vm.permission.fields.cgfwmx.wbfl = 'n' vm.permission.fields.cgfwmx.wbxqxxsm = 'n' } else { vm.permission.fields.cgfwmx.wbfl = oldPermission2; vm.permission.fields.cgfwmx.wbxqxxsm = oldPermission3; } }
效果展示:
注:可以下载下方的表单附件导入到7.2环境中查看效果