vue 解决页面闪烁问题

watch: { //监听表格数据的变化【使用 watch+nextTick  可以完成页面数据监听的 不会出现闪烁】
					tableData: { //深度监听,可监听到对象、数组的变化
						handler(val, oldVal) {
							this.$nextTick(function() {
								var that = this;
								var thisSelTreeData = that.tableSelTreeData;
								for(var j = 0; j < thisSelTreeData.length; j++) {
									if(thisSelTreeData[j].data.length > 0) {
										var thisHtml = "";
										for(var i = 0; i < thisSelTreeData[j].data.length; i++) {
											thisHtml += '<div class="ivu-tag ivu-tag-checked"><span class="ivu-tag-text">' + thisSelTreeData[j].data[i] + '</span> <i class="ivu-icon ivu-icon-ios-close-empty" onclick="removeThis(this,' + j + ',\'' + thisSelTreeData[j].data[i] + '\')"></i > </div>';
										}
										//选中的值 渲染到页面
										$("body").find("#" + thisSelTreeData[j].treeId).parent().parent().siblings().children("div").html(thisHtml);
									} else {
										$("body").find("#" + thisSelTreeData[j].treeId).parent().parent().siblings().children("div").html('<span class="ivu-select-placeholder">请选择</span>');
									}
								}
							})

						},
						deep: true
					}
				},

  使用watch  监听数据的变化  配合 this.$nextTick(在同一事件循环中的数据变化后,DOM完成更新,立即执行nextTick(callback)内的回调。)

猜你喜欢

转载自www.cnblogs.com/lgjc/p/9174754.html
今日推荐