vue实现treeselect

Vue 实现 TreeSelect 组件

安装依赖

使用 npm 或 yarn 安装 vue-treeselect，这是一个专为 Vue.js 设计的树形选择组件：

npm install @riophae/vue-treeselect
# 或
yarn add @riophae/vue-treeselect

基本用法

在 Vue 组件中引入并注册 vue-treeselect，通过 :options 传递树形数据：

<template>
  <treeselect v-model="selectedValue" :options="treeData" />
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { Treeselect },
  data() {
    return {
      selectedValue: null,
      treeData: [
        {
          id: 'group1',
          label: 'Group 1',
          children: [
            { id: 'item1', label: 'Item 1' },
            { id: 'item2', label: 'Item 2' }
          ]
        }
      ]
    }
  }
}
</script>

配置选项

• 多选模式：添加 multiple 属性，v-model 绑定数组：

  <treeselect v-model="selectedValues" :options="treeData" multiple />

• 异步加载：通过 load-options 方法动态加载子节点：

  <treeselect 
    v-model="selectedValue" 
    :load-options="loadOptions" 
    async
  />

• 禁用节点：在数据中添加 isDisabled 字段：

  treeData: [
    { id: 'item1', label: 'Item 1', isDisabled: true }
  ]

自定义样式

通过覆盖 CSS 变量或使用 props 调整样式：

<treeselect 
  :options="treeData" 
  placeholder="请选择..." 
  noResultsText="无匹配结果"
/>

事件处理

监听 select、deselect 等事件实现交互逻辑：

<treeselect 
  @select="handleSelect" 
  @deselect="handleDeselect" 
/>

注意事项

• 数据格式要求每个节点必须有唯一 id 和 label，子节点通过 children 字段嵌套。
• 复杂场景可结合 flatMode 或 valueFormat 处理扁平化数据。
• 性能优化：对于大型树结构，建议启用 async 模式或分页加载。