文章目录
前言
原逻辑:后端data数据中返回数组,数组中有两个对象,一个是属性指标,一个是应用指标,根据这两个指标展示不同的多选框
1.原本代码
javascript
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 的数据进行判断即可
优化后的代码
javascript
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 === '属性指标';
// 更新 indexObj
if (!indexObj[showFieldTag]) {
indexObj[showFieldTag] = {
checked: false,
disabled: isAttri
};
}
// 如果 showFieldTag 在 target 中,更新 indexObj 并插入 indexList
if (targetMap.has(showFieldTag)) {
indexObj[showFieldTag].checked = true;
// 插入 indexList,保持 target 的顺序
indexList[targetMap.get(showFieldTag)] = {
...fieldItem,
disabled: isAttri
};
}
})
})
return {
indexList,
indexObj
}
},