iView联动组件当数据量大时一次性加载会导致页面卡顿,我遇到的数据大小是2M,一次性加载导致页面卡顿了10多秒,体验度及其差。
我优化的方式是暂时给级联选择组件的对象属性children属性为空数组,可以先把所有数据保存在自定义的一个属性里面,方式如下。
1、请求到后台数据,然后重组
this.axios({
url: "xxxx",
methods: "get",
params: { name: "Area.json" }
})
.then(res => {
this.diqu = res.data.map(resItem=> {
return {
value: { Name: resItem.NAME, Dam: resItem.Dam },
label: resItem.NAME,
children: [],
loading: false,//判断是否有值来显示loading
data: resItem.List//暂时把所有数据保存在data
};
});
this.loading = false;
})
.catch(err => {
this.loading = false;
});
2、iView自带load-data 触发事件,触发该事件时再重组选择项的children数据。
loadAreaData(item, callback) {
item.loading = true;
setTimeout(() => {
item.children = item.data.map(storageData => {//storageData为第一步的 resItem.List
//storageData.List为每个联动的子级数组, 我的数据结构为:
// [
// {
// NAME: "xxxx",
// List: [
// {
// NAME: "xxxx",
// List: [{}]
// }
// ]
// }
// ];
if (storageData.List.length == 0) {//如果没有子级联动,就没有loading、children和不保存data字段
return {
value: { Name: storageData.NAME },
label: storageData.NAME,
};
} else {
return {
value: { Name: storageData.NAME },
label: storageData.NAME,
data: storageData.List,
loading: false,
children: []
};
}
});
item.loading = false;
callback();
}, 50);
}
以上就是我实现iView联动动态加载的方式,关于iView级联选择动态加载的详细文档请查看官网:https://www.iviewui.com/components/cascader#DTJZXX。