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)內的回調。)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM