vue-treeselect 延迟加载（动态加载多层数据）

官方文档说明
===== go to ====> 官网 vue-treeselect 延迟加载

如果您有大量深度嵌套的选项，则可能只希望在初始加载时加载最顶层的选项，而仅在需要时加载其余选项。您可以通过执行以下步骤来实现：

1. 通过设置声明一个卸载的分支节点children: null
2. 添加 loadOptions 道具
3. 每当卸载的分支节点被扩展时， 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();
          }
        }