riophae/vue-treeselect 懒加载

在使用 `@riophae/vue-treeselect` 组件时，若希望实现懒加载功能，需要正确配置 `load-options` 属性，并确保组件的其他相关属性设置得当，以支持异步加载机制。懒加载（也称为异步加载）适用于节点数量较多、无法一次性加载全部数据的场景，通过按需加载子节点，可以提升组件性能和用户体验。 ### 实现懒加载的关键点 - **`load-options` 属性**：该属性用于指定一个异步加载函数，该函数会在用户展开某个节点时被调用。该函数接收两个参数：当前节点对象和回调函数，开发者需要在异步获取数据后调用回调函数来注入子节点数据。 - **`async` 属性**：必须将 `async` 设为 `true`，表示启用异步加载模式。 - **`options` 属性**：对于懒加载模式，`options` 可以仅提供顶层节点，或者设置为 `null`，具体取决于初始加载逻辑。 - **`default-expand-level` 属性**：可以设置默认展开的层级，避免用户手动点击展开。 ### 示例代码 以下是一个实现懒加载的示例代码片段： ```vue <template> <vue-treeselect v-model="selectedValue" :async="true" :load-options="loadOptions" :options="options" :default-expand-level="1" placeholder="请选择" /> </template> <script> export default { data() { return { selectedValue: null, options: [ { id: '1', label: '父节点1', children: null, // 表示该节点需要懒加载 }, ], }; }, methods: { async loadOptions({ action, parentNode, callback }) { if (action === 'LOAD_CHILDREN_OPTIONS') { // 模拟异步请求 const response = await fetchChildren(parentNode.id); parentNode.children = response; callback(); } else if (action === 'LOAD_ROOT_OPTIONS') { // 如果需要懒加载根节点，也可以在此处理 const response = await fetchRootNodes(); this.options = response; callback(); } }, }, }; // 模拟异步请求方法 function fetchChildren(parentId) { return new Promise((resolve) => { setTimeout(() => { resolve([ { id: `${parentId}-1`, label: `子节点1` }, { id: `${parentId}-2`, label: `子节点2` }, ]); }, 500); }); } function fetchRootNodes() { return new Promise((resolve) => { setTimeout(() => { resolve([ { id: '1', label: '父节点1', children: null }, { id: '2', label: '父节点2', children: null }, ]); }, 500); }); } </script> ``` ### 注意事项 - 如果组件进行了二次封装，确保 `load-options` 和 `async` 属性正确传递到内部的 `vue-treeselect` 组件。 - 若懒加载不生效，检查是否遗漏了 `async="true"` 或 `load-options` 函数未被正确绑定。 - 在动态加载数据时，若需要实现选中状态的回显，可以结合 `v-model` 与 `value-consists-of` 属性控制选中值的组成方式[^2]。 ---