树形结构下拉框组件vue-treeselect的使用（安装、模糊匹配、单选、多选、延迟加载、异步搜索等）

<template>
  <treeselect
    v-model="value"
    :multiple="true"
    :options="options"
    :load-options="loadOptions"
    :searchable="true"
    :default-expand-level="2"
  />
</template>
 
<script>
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
 
export default {
  components: { Treeselect },
  data() {
    return {
      value: null,
      options: [
        { id: '1', label: 'Option 1' },
        { id: '2', label: 'Option 2' },
        // ...
      ],
    };
  },
  methods: {
    loadOptions({ action, parentNode, callback }) {
      if (action === 'LOAD_CHILDREN_OPTIONS') {
        // 假设我们有一个异步函数来加载子选项
        fetchChildrenOptions(parentNode).then(childrenOptions => {
          callback(childrenOptions);
        });
      }
    },
  },
};
</script>

这个代码实例展示了如何在Vue中使用vue-treeselect组件来创建一个树形结构的下拉选择框。它包括了多选、模糊匹配、延迟加载选项等功能。在实际应用中，你需要替换fetchChildrenOptions为实际从后端获取数据的逻辑。