如何在vue-treeselect中启用懒加载?

在Vue-treeselect中启用懒加载（即延迟加载数据）通常涉及两个步骤：修改组件配置并处理选项请求。
首先，你需要在vue-treeselect组件的配置中设置lazy选项为true，这样它就会等待用户选择或展开选项时才会去请求远程数据：
<template>
<vue-treeselect
:options="options"
:lazy="true"
:load-on-open="true"
@fetch-data="fetchData"
@open-item="openItem"
></vue-treeselect>
</template>

<script>
export default {
data() {
return {
options: [], // 初始化为空数组
};
},
methods: {
fetchData(item) {
// 这里模拟异步请求，实际应用中替换为你的API请求
return new Promise((resolve) => {
setTimeout(() => {
resolve([...item.options, { id: 'newOptionId', text: 'New Option' }]);
}, 500); // 模拟延迟500毫秒
});
},
openItem(option) {
this.fetchData(option).then(updatedOptions => {
this.options = updatedOptions; // 更新选项数组
});
},
},
};
</script>
登录后复制
在这个例子中，fetchData方法会在用户打开某个选项时被调用，它会返回一个新的选项列表，其中包含了新加载的数据。load-on-open属性确保了选项会在被选中或展开时自动加载。