vue实现treeselect
Vue TreeSelect 实现方法
安装依赖
使用 vue-treeselect 组件需要先安装依赖包：
npm install @riophae/vue-treeselect基础用法
在 Vue 组件中引入并注册组件：
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: { Treeselect },
data() {
return {
value: null,
options: [
{
id: 'group1',
label: 'Group 1',
children: [
{ id: 'item1', label: 'Item 1' },
{ id: 'item2', label: 'Item 2' }
]
}
]
}
}
}模板中使用：
<treeselect v-model="value" :options="options" />异步加载数据
实现异步加载节点数据：
async loadOptions({ action, parentNode, callback }) {
if (action === LOAD_CHILDREN_OPTIONS) {
const res = await api.getChildren(parentNode.id)
callback(null, res.data.map(item => ({
id: item.id,
label: item.name
})))
}
}多选配置
启用多选模式和扁平化显示：
<treeselect
v-model="values"
:options="options"
multiple
flat
placeholder="选择多个项目"
/>自定义节点样式
通过插槽自定义节点渲染：
<treeselect v-model="value" :options="options">
<template v-slot:option-label="{ node }">
<span style="color: red">{{ node.label }}</span>
</template>
</treeselect>禁用状态
控制组件禁用状态：
<treeselect v-model="value" :options="options" :disabled="isDisabled" />搜索过滤
启用搜索功能并自定义过滤逻辑：
<treeselect
v-model="value"
:options="options"
:searchable="true"
:filter="filterNodes"
/>表单验证
结合表单验证使用：
<treeselect
v-model="form.treeValue"
:options="options"
:class="{ 'is-invalid': $v.form.treeValue.$error }"
@input="$v.form.treeValue.$touch()"
/>性能优化
处理大型数据集时启用延迟加载：
<treeselect
v-model="value"
:options="options"
:load-options="loadOptions"
:async="true"
:limit="50"
/>注意事项
- 确保选项数据格式正确，每个节点需要包含
id和label属性 - 多层级数据需要正确嵌套在
children属性中 - 异步加载时处理好加载状态和错误情况
- 样式文件需要单独引入，可以自定义覆盖默认样式
