本文探讨了在Vue中使用watch监听对象属性时遇到的数据丢失问题，以及三级级联选择器的一维数据处理。通过将请求数据的方法放入监听对象内部避免了数据展示延迟。同时，针对一维数据构建三级级联选择器，通过遍历和过滤实现了数据转换。在调试过程中，强调了思路清晰和细心检查的重要性。
1、watch监听对象的某一个属性，也监听了对象，对象的属性，数据展示，需要请求接口，操作刷新数据后，数据展示丢失问题
将监听的这个属性请求数据的方法，放入监听的对象里，就没有这个问题了，分析发现是刷新时，监听对象的属性，并没有再次调用请求数据的方法。现在是请求回来时。数据展示那里还是有几秒的空白，等刷新完毕，才会显示，对象的其他数据都没有这个问题，
2、三级级联选择器，返回数据是一维数据
对数组遍历filter，筛选出第一级数据，遍历一级数组，内循环遍历全数据，forEach不改变原数组，2次调用forEach方法，往子数组children插入对象，判断条件，如果children的数组为空，delete子数组children；
// 请求全部真实原因数据字典
getReasonDict() {
const params = {
restParams: ''
};
api.queryDutyReason(params).then(res => {
const newArr = [];
res.data.filter(item => {
if (item.reasonCode.length === 3) {
const obj = {
value: item.reasonCode,
label: item.reasonName
};
newArr.push(obj);
}
});
newArr.forEach(item => {
const children = [];
res.data.forEach(user => {
if (item.value === user.parentReasonCode) {
const obj = {
value: user.reasonCode,
label: user.reasonName
};
children.push(obj);
item.children = children;
if (item.children) {
this.getThirdLevel(item.children, res.data);
}
}
});
});
this.applicationRealReason = newArr;
});
},
getThirdLevel(children, data) {
children.map(item => {
item.children = [];
data.forEach(child => {
if (item.value === child.parentReasonCode) {
const obj = {
value: child.reasonCode,
label: child.reasonName
};
item.children.push(obj);
}
});
if (item.children.length === 0) {
delete item.children;
}
});
},
报错：先百度错误，自己细心找，每个都确认，到最后实在兼容不了才想新方法
写代码之前要先想思路，思路很重要
细心细心再细心
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
