交流建设网站,制作自己的网站需要什么,外贸网站排行,网页开发背景怎么写懒加载#xff1a;点击节点时才进行该层数据的获取。 注意#xff1a;使用了懒加载之后#xff0c;一般情况下就可以不用绑定:data。 el-tree :propsprops :loadloadNode lazy/el-tree懒加载—由于在点击节点时才进行该层数据的获取…懒加载点击节点时才进行该层数据的获取。 注意使用了懒加载之后一般情况下就可以不用绑定:data。 el-tree :propsprops :loadloadNode lazy/el-tree懒加载—由于在点击节点时才进行该层数据的获取默认情况下 Tree 无法预知某个节点是否为叶子节点所以会为每个节点添加一个下拉按钮如果节点没有下层数据则点击后下拉按钮会消失。同时你也可以提前告知 Tree 某个节点是否为叶子节点从而避免在叶子节点前渲染下拉按钮。
loadNode(node, resolve) {if (node.level 0) {return resolve([{ name: region }]);}if (node.level 1) return resolve([]);setTimeout(() {const data [{name: leaf,leaf: true, // 为叶子节点}, {name: zone}];resolve(data);}, 500);}
}
手动触发load更新
推荐此方法有效避免直接调用loadNode(node, resolve)函数可以间接从组件内部触发load事件这样就不需要缓存resolve这个不好拿到的入参。省去后续很多麻烦事特别是由于懒加载只加载一次导致缓存的数据和方法不匹配当前点击的节点从而导致增删改树结构数据时显示异常的问题方法2中有详细说明。 refreshNode(key) {// 获取当前节点key可以在node-click和:load绑定函数的回调参数node用变量存储后有需要刷新的地方取node.keylet node this.$refs.tree.getNode(key);// 设置未进行懒加载状态node.loaded false;// 重新展开节点就会间接重新触发load达到刷新效果node.expand();},手动触发load更新 方法2 可以在第一次懒加载数据的时候把 loadNode 的 2 个参数保存下来然后添加节点的时候重新调用一下这个方法就可以了 不推荐由于loadNode只会针对某个节点加载一次后续再点击你点过的这个节点的小箭头不会再次触发loadNode这容易让缓存的两个数据this.node和this.resolve与当前点击节点不匹配比如你点击了未懒加载过的小箭头再去点已经懒加载过的其他小箭头或者节点这时候由于已懒加载的不会再触发loadNode函数而你缓存的this.node和this.resolve却是上一次的这种情况下如果你在当前点击的节点对子节点进行增删改请求后去手动调用loadNode传入this.node和this.resolve刷新树节点由于传入的数据都是上一次的那么就会出现你请求的新的树节点数据跑到上一次触发懒加载缓存的节点去的情况这时树结构的数据就显示异常了)
// 节点懒加载事件
loadNode (node, resolve) {// loadNode 的 2 个参数保存下来方便下次手动调用传入this.node nodethis.resolve resolve// 你的请求逻辑......
},
refreshNode () {this.node.childNodes [] // 这里把子节点清空是因为再次调用 loadNode 的时候会往 childNodes 里 push 节点所以会有节点重复的情况。// 把刚刚存的两个变量手动传入调用this.loadNode(this.node, this.resolve)
},手动触发load更新
async loadNode(node, resolve) {if (node.level 0) { // 加载第一级节点年份return resolve(await this.getYearList());}if (node.level 1) { // 加载第二级节点月份return resolve(await this.getMonthList(node));}return resolve([]);
},
// 调用接口 获取年份数据
getYearList(){return data
},// 调用接口 根据年份获取月份数据
getMonthList(node){return data
}// 想要重新获取一级节点,直接调用
this.getYearList()// 想要重新获取二级节点,直接调用
this.getMonthList(node)参考 2021-09-06 el-tree 懒加载load 手动触发load更新的三种方法
el-tree手动触发懒加载load
ElementUi Tree树形控件的使用增、删
ElementUI tree 懒加载 手动刷新数据
el-tree 在 el-dialog 显示时 重新加载 el-tree el-tree采用懒加载
