电商网站详细设计电影网站开发

前言

原逻辑：后端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}
},