vue-treeselect组件树懒加载

            <treeselect
                :options="treeOptions"
                :normalizer="normalizer"
                :default-expand-level="0"
                noChildrenText="没有数据了"
                noOptionsText="没有数据"
                noResultsText="没有搜索结果"
                placeholder="请选择"
                @select="getSelect"
                v-model="list"
              >
              </treeselect>

:default-expand-level="0"  有多个一级，设置为0默认不展开

这里使用的是单选，只有两级并且将第二级数据禁用，点击第一级数据加载第二级 

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: {
    Treeselect
  },   
  data() {
    return {
       treeOptions: [],
       list:null
    }
  },
  methods: {
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children:
          node.GroupList&& node.GroupList.length > 0
            ? node.GroupList
            : 0
      }
    },
    // 根据点击获取到当前节点信息    
    getSelect(node) {
      // 通过id查找子节点数据
      getInfo(node.id).then((res) => {
      res.data.GroupList.map((item) => {
        // 循环数据因为normalizer里面label设置为name
        item.name = item.NikeName
        // 将第二级数据禁用
        item.isDisabled = true
      })
      // 将当前节点id  与树结构对比通过id拿到所在数组
      const nodeToUpdate = this.findNodeById(this.treeOptions, node.id)
      if (nodeToUpdate) {
        // 更新节点对象的 videoGroupList 字段
        nodeToUpdate.GroupList= res.data.GroupList
      }
      })
    }
    findNodeById(options, id) {
      // 递归查找节点对象
      for (let i = 0; i < options.length; i++) {
        const node = options[i]
        if (node.id === id) {
          return node
        } else if (node.children) {
          const found = this.findNodeById(node.children, id)
          if (found) {
            return found
          }
        }
      }
      return null
    }
}
</script>