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模式或分页加载。
