1、vm.$nextTick
- 参数:
{Function} [callback]
- 用法:将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。它跟全局方法
Vue.nextTick
一样,不同的是回调的 this
自动绑定到调用它的实例上。
实例:
<template>
<div>
<p ref="msgp">{{msg}}</p>
<button @click="change">$nextTick</button>
</div>
</template>
<script>
export default {
name: 'nextTick',
data() {
return {
msg: '未更新'
}
},
methods: {
change() {
// 修改数据
this.msg = '被更新了'
// DOM还没有更新
console.log(this.$refs.msgp.innerHTML)
this.$nextTick(() => {
// DOM更新了
console.log('$nextTick:' + this.$refs.msgp.innerHTML)
})
}
},
created() {
}
}
</script>
2、el-tree重新加载
//懒加载的方式加载项目划分
lazyLoadTree(node, resolve) {
debugger;
if (
this.resolveCache[node.id] == undefined ||
this.resolveCache[node.id] == null
)
this.resolveCache[node.id] = resolve;
if (node.level === 0) {
this.reloadCache["resolve"] = resolve; //为了重载树,缓存 的信息
this.getChildNodes("0", resolve);
} else {
var item = node.data;
this.getChildNodes(node.data.id, resolve);
}
},
//获取当前节点的子节点数据
getChildNodes(parentNodeId, resolve) {
var $vm = this;
$.get("/a/GetChildNodes",
{
parentNodeId: parentNodeId
},
function (result) {
resolve(result.data);
},
"json"
);
},
//重新加载树
reloadLazyTree() {
let tree = this.$refs.tree1;
let theChildren = tree.root.childNodes;
theChildren.splice(0, theChildren.length); //先清空原有节点
this.lazyLoadTree(tree.root, this.reloadCache["resolve"]);
},