vue-treeselect 延迟加载(动态加载多层数据)
欢迎使用Markdown编辑器官方文档说明===== go to ====> 官网 vue-treeselect 延迟加载如果您有大量深度嵌套的选项,则可能只希望在初始加载时加载最顶层的选项,而仅在需要时加载其余选项。您可以通过执行以下步骤来实现:通过设置声明一个卸载的分支节点children: null添加 loadOptions 道具每当卸载的分支节点被扩展时, loadOptions(
·
官方文档说明
===== go to ====> 官网 vue-treeselect 延迟加载
如果您有大量深度嵌套的选项,则可能只希望在初始加载时加载最顶层的选项,而仅在需要时加载其余选项。您可以通过执行以下步骤来实现:
- 通过设置声明一个卸载的分支节点children: null
- 添加 loadOptions 道具
- 每当卸载的分支节点被扩展时, loadOptions({ action, parentNode, callback, instanceId }) 都会被调用,然后您就可以执行从远程服务器请求数据的作业
1.html
<treeselect
v-model="value"
:multiple="false"
:options="rootOptions"
:load-options="loadOptions"
placeholder="选择上级模型"
/>
multiple: 展示多选框
rootOptions : 初始化加载根节点数据
loadOptions:单击根节点后加载子节点数据
2.js
export default {
data: () => ({
value: null,
rootOptions: [],
}),
methods: {
/** 初始化下拉框数据 **/
getRootModels() {
//初始化数据 只加载根节点
locationTree('0').then(response => {
for(let index of response.data){
let modeInfo = {} ;
modeInfo.id = index.id
modeInfo.label = index.name;
modeInfo.children = null;
this.rootOptions.push(modeInfo);
}
});
},
/** 加载子节点数据 **/
loadOptions({ action, parentNode, callback }){
if (action === LOAD_CHILDREN_OPTIONS) {
//加载点击节点的 子节点
locationTree(parentNode.id).then(response => {
let arr = [];
for(let index of response.data){
let chiledModeInfo = {} ;
chiledModeInfo.id = index.id
chiledModeInfo.label = index.name;
chiledModeInfo.children = null;
arr.push(chiledModeInfo);
}
parentNode.children = arr;
});
callback();
}
},
}
}
3.效果
4.问题和修改思路
思(gu)路(ji):如上图,“ileave tude of…” 已经是最后一层的子节点了,但是还显示有箭头。这里应该没有箭头的,可以再加载子节点的时候进行判断,如果本层没有子节点不设置"children"即可。
loadOptions({ action, parentNode, callback }){
if (action === LOAD_CHILDREN_OPTIONS) {
locationTree(parentNode.id).then(response => {
let arr = [];
for(let index of response.data){
let chiledModeInfo = {} ;
chiledModeInfo.id = index.id
chiledModeInfo.label = index.name;
/** 伪代码 start **/
//在这里判断下是不是叶子节点 如果是 就给个数组 不是就不给了
if(index.isLeaf){
chiledModeInfo.children = null;
}
/** 伪代码 end**/
arr.push(chiledModeInfo);
}
parentNode.children = arr;
});
callback();
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)