vue-treeselect

// 导入树options

import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'

import '@riophae/vue-treeselect/dist/vue-treeselect.css'

然后声明此时未点击，此时为未加载状态

var called = false

<treeselect :options="options" :load-options="loadOptions" placeholder="Category" v-model="value" @input="categoryValueChange(value)" />

async loadOptions ({
      action,
      parentNode,
      callback
    }) {
      // Typically, do the AJAX stuff here.
      // Once the server has responded,
      // assign children options to the parent node & call the callback.
      if (action === LOAD_ROOT_OPTIONS) {
        if (!called) {
          called = true
        } else {
          try {
            const res = await this.$apis.requestCategoryTree()
            var optionsList = []
            for (var i = 0; i < res.length; i++) {
              var optionItem = {
                id: res[i].id,
                label: res[i].text,
                children: null
              }
              optionsList.push(optionItem)
            }
            this.options = optionsList
            this.options.sort(function (x, y) {
              return x.label > y.label ? 1 : -1
            })
          } catch (error) {
            console.log(error)
          }
        }
      }
      if (action === LOAD_CHILDREN_OPTIONS) {
        switch (parentNode.id) {
          case parentNode.id:
          {
            simulateAsyncOperation(() => {
              this.requestTreeData(parentNode.id).then(response => {
                parentNode.children = []
                for (var i = 0; i < response.length; i++) {
                  var childrenItem = {
                    id: response[i].id,
                    label: response[i].text
                  }
                  parentNode.children.push(childrenItem)
                  // parentNode.children=[{
                  //     id: 'child',
                  //     label: 'Child option',
                  // }]
                }
              })
              callback()
            })
            break
          }
          default:
                        /* empty */
        }
      }
    },

这里是我自己写的可能有些模糊，看文档当然会更好理解

https://vue-treeselect.js.org/