Vue - nextTick()

背景：

列表点查询后，根据后台数据更新复选框为选中状态不生效。 toggleRowSelection 设置无效。

getList(this.queryList).then(response=>{
      this.list = response.rows; 
      for (var i = 0; i < this.list.length; i++) {
	if (this.list[i].isSelect === "1") {
		this.$refs.multipleTable.toggleRowSelection(this.list[i], true);
	}
    }
});    

原因如下：

请记住：**vue是依靠数据驱动视图更新的，该更新的过程是异步的。**即：当侦听到你的数据发生变化时， Vue将开启一个队列（该队列被Vue官方称为异步更新队列）。视图需要等队列中所有数据变化完成之后，再统一进行更新。

正确的代码为：

getList(this.queryList).then(response=>{
    this.list = response.rows; 
    this.$nextTick(() => {
	for (var i = 0; i < this.list.length; i++) {
		if (this.list[i].isSelect === "1") {
			this.$refs.multipleTable.toggleRowSelection(this.list[i], true);
		}
	}
	});
});

参考：

https://zhangpeiyue.blog.csdn.net/article/details/90939131?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link