长春做网站的公司有哪些,网页设计的主题,宿迁手机网站建设公司,美橙互联网站备案文章目录 前言1.原本代码2.新增逻辑3.优化逻辑 前言
原逻辑#xff1a;后端data数据中返回数组#xff0c;数组中有两个对象#xff0c;一个是属性指标#xff0c;一个是应用指标#xff0c;根据这两个指标展示不同的多选框 1.原本代码
getIndicatorRange(indexReportLi… 文章目录 前言1.原本代码2.新增逻辑3.优化逻辑 前言
原逻辑后端data数据中返回数组数组中有两个对象一个是属性指标一个是应用指标根据这两个指标展示不同的多选框 1.原本代码
getIndicatorRange(indexReportList, target) {const indexList []const indexObj {}indexReportList.forEach(item {item.showReportFieldList.forEach(fieldItem {indexObj[fieldItem.showFieldTag] {checked: target.includes(fieldItem.showFieldTag),disabled: item.name 属性指标}if (target.includes(fieldItem.showFieldTag)) {indexList.push({...fieldItem,// isAttri: item.name 属性指标, // 判断是否是属性指标disabled: item.name 属性指标})}})})return {indexList,indexObj}},indexReportList.forEach(item {const tarList [...target] // 浅拷贝数组tarList.forEach(tarItem {item.showReportFieldList.forEach(fieldItem {indexObj[fieldItem.showFieldTag] {checked: tarItem fieldItem.showFieldTag,disabled: item.name 属性指标}if (tarItem fieldItem.showFieldTag) {indexList.push({...fieldItem,// isAttri: item.name 属性指标, // 判断是否是属性指标disabled: item.name 属性指标})}})})})2.新增逻辑 这个选中的指标可以进行拖拽然后拖获取回显逻辑中由于是遍历接口获取的源数组导致拖拽保存后重新进入页面还是原本的拖拽顺序也就是顺序没改。 3.优化逻辑 正常是在最外层使用遍历拖拽后的新数组获取一个新的源数组进行渲染但是这样加上本身的for循环就有三层for循环了。优化后的代码如下拷贝展示数据遍历这个数据将里面的是否存在直接和item 的数据进行判断即可 优化后的代码 getIndicatorRange(indexReportList, target) {const indexList []const indexObj {}const targetMap new Map();// 构建 targetMap保持 target 的顺序target.forEach((tarItem, index) {targetMap.set(tarItem, index);});indexReportList.forEach(item {item.showReportFieldList.forEach(fieldItem {const showFieldTag fieldItem.showFieldTag;const isAttri item.name 属性指标;// 更新 indexObjif (!indexObj[showFieldTag]) {indexObj[showFieldTag] {checked: false,disabled: isAttri};}// 如果 showFieldTag 在 target 中更新 indexObj 并插入 indexListif (targetMap.has(showFieldTag)) {indexObj[showFieldTag].checked true;// 插入 indexList保持 target 的顺序indexList[targetMap.get(showFieldTag)] {...fieldItem,disabled: isAttri};}})})return {indexList,indexObj}
},
