问题还原：在抽屉中加载多个级联选择器造成页⾯渲染卡顿。产品要求级联选择器可以选择任意⼀级。 解决思路：iview提供了load-data属性异步加载⼦选项。 设置属性 change-on-select 点任何⼀级都可以选择。
产⽣的新问题：设置属性change-on-select为true时，在编辑页⾯时只会回显第⼀级。
解决思路：为级联选择器注册 on-visible-change事件，展开和关闭弹框时触发，展开时设置 this.ischangeOnSelect为true。 <Cascader
:data="areaList"
placeholder="请选择地区"
:load-data="loadData"
@on-change="changeCas"
ugcam
@on-visible-change='handleVisibleChange'
v-model="addresData"
changeOnSelect='true'
></Cascader>
对绑定的数据进⾏处理， 给数据增加 loading 来标识当前是否在加载中
getAreaList(){
//获取省市区
getAreaList().then(res =>{
this.areaList =[];
if(res.success){
婴幼儿营养与保健
sult && sult.length){
this.areaList = sult.map(item =>{
return{
value: item.value,
label: item.label,
children:[],
loading:false,
data: item.children
}
})
教育与社会的关系}
}
});
},
为级联选择器注册 on-visible-change事件
handleVisibleChange(val){
this.ischangeOnSelect = val;
},
load-data 的第⼆个参数为回调，如果执⾏，则会⾃动展开当前项的⼦列表。判断this.ischangeOnSelect是否为true，即判断级联选择器的下拉框是否为展开的，如果是展开的就执⾏回调函数，⾃动展开当前项的⼦列表，否则就不执⾏回调
loadData(item, callback){
item.loading =true;
this.$nextTick(()=>{
item.children = item.data.map(dataItem =>{ if(dataItem.children.length ==0){
return{
value: dataItem.value,
label: dataItem.label
}
}else{
return{
value: dataItem.value,
label: dataItem.label,一面五星红旗教学设计
loading:false,
children:[],
data: dataItem.children
}
}
});
item.loading =false;
if(this.ischangeOnSelect){
callback();
}
墨白不起眼的一颗星})
},
远华案件
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议