使用vue-treeselect实现下拉懒加载有感

最近公司需要使用vue-treeselect下拉框懒加载实现，记录一下所使用的一些步骤

所用插件 vue-treeselect

实现案例

第一步

import Treeselect from '@riophae/vue-treeselect'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

第二步

<treeselect
  v-model="form.resourceIds"   //双向绑定的值
  :multiple="true"             //是否需要多选框
  :options="options"           //初始化根节点数据
  :flat="true"                 //是否启用平面模式
  :default-expand-level="1"    //需要展开的子级(如果不需要自动展开子菜单的话，这句就不要啦)
  :load-options="loadOptions"  //单击父节点，加载子节点数据
  placeholder="选择上级模型"
/>

第三步

created: function() {
    this.getTree()
  },
  methods: {
    getTree() {
      // 初始化下拉框数据 只加载根节点
      getHRResource().then(res => {
        for (var i = 0; i < res.length; i++) {
          var parentInfo = {}
          parentInfo.editable = res[i].editable
          parentInfo.id = res[i].id
          parentInfo.label = res[i].label
          parentInfo.level = res[i].level
          parentInfo.name = res[i].name
          parentInfo.parentId = res[i].parentId
          // 主要就是为了添加 children = null  
          parentInfo.children = null
          this.options.push(parentInfo)
        }
      })
    },
    // 加载子节点数据
    loadOptions({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        // 加载点击节点的 子节点
        getHRResourceChild(parentNode.id).then(response => {
          var arr = []
          if (response.length > 0) {
            for (var i = 0; i < response.length; i++) {
              const chiledModeInfo = {}
              chiledModeInfo.editable = response[i].editable
              chiledModeInfo.id = response[i].id
              chiledModeInfo.label = response[i].label
              chiledModeInfo.level = response[i].level
              chiledModeInfo.name = response[i].name
              chiledModeInfo.parentId = response[i].parentId
              // 主要就是为了添加 children = null  
              chiledModeInfo.children = null
              arr.push(chiledModeInfo)
            }
          }
          parentNode.children = arr
        })
        callback()
      }
    }
  }