Vue提供的nextTick方法是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。
现在有这么个需求,要求点击表格的扩展三角就展开扩展行。
现在遇到的问题呢,假如扩展行的数据是同步的,那么展开就是正常展示的;如果数据是点击时才异步加载的,那么表格展开就是空白,因为在数据回来并绑定之前,扩展行就已经展开了,导致数据没有渲染上去。这时就要用到nextTick来延迟回调并刷新。
// 点击扩展行时请求集团数据
expandChange(row){
let self = this;
let phenomenonCode = row.phenomenonCode2;
// 如果集团列表已经有数据,则直接返回
if( row.blocPhenoClassMapping ){
return;
}
querySmallClassBlocInfo( phenomenonCode )
.then( response => {
if(response.data.code == 200){
self.$set(row,'blocPhenoClassMapping',response.data.data.list)
row.blocPhenoClassMapping.map(item =>{
switch(item.isEndNode){
case 'Y':
item.isEndNode = '是';
break;
case 'N':
item.isEndNode = '否';
break;
}
});
// 在数据绑定好时再展开扩展行
self.$nextTick(function () {
self.$refs.blocTreeTable.toggleRowExpansion( row, true );
});
}else{
self.$message({
message: response.data.msg,
type: 'warning'
});
}
})
.catch((err) =>{
})
},
还比如:用swiper插件写轮播图时,图片也是异步加载的,这时也得用nextTick来处理,不然轮播图也是一片空白啦。