项目场景:
当列表数据发生变化时,例如刷新列表或者更改查询条件获取列表数据重新渲染列表。
问题描述
列表正常这样子显示
当列表数据发生变化时,下面的这个状态会一闪而过,然后恢复正常。
原因分析:
列表数据变化时,vue会重新计算列表高度宽度重新渲染,这个过程会导致列表闪烁。
解决方案:
element-ui提供了一个表格方法doLayout,可以使用该方法避免表格闪烁的情况。
①
beforeUpdate() {
this.$nextTick(() => {
this.$refs['table'].doLayout()
})
}
②
async fn(){
const res = await getApi(); //在使用接口调取数据后
this.tableData = res.data.rows; //将数据赋值给列表data
this.$nextTick(() => { //调用doLayout重新渲染表格
this.$refs['table'].doLayout();
})
}