vue-treeselect实现多选
vue-treeselect 多选实现方法
vue-treeselect 是一个基于 Vue.js 的多级树形选择组件，支持单选和多选模式。以下是实现多选功能的具体方法：
安装与引入
确保已安装 vue-treeselect 依赖：
npm install @riophae/vue-treeselect在组件中引入：
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'基础多选配置
在组件模板中添加 Treeselect 并启用多选：
<treeselect
:multiple="true"
:options="options"
v-model="selectedValues"
/>关键属性说明
-
multiple: 设置为true启用多选模式
-
options: 树形数据源，格式示例：options: [ { id: 'group1', label: 'Group 1', children: [ { id: 'item1', label: 'Item 1' }, { id: 'item2', label: 'Item 2' } ] } ] -
v-model: 绑定选中的值数组
高级功能配置
限制选择数量：
<treeselect
:multiple="true"
:limit="3"
:options="options"
v-model="selectedValues"
/>显示选择数量：
<treeselect
:multiple="true
:show-count="true"
:options="options"
v-model="selectedValues"
/>异步加载数据
实现异步加载子节点：
async-load-options({ action, parentNode, callback }) {
if (action === LOAD_CHILDREN_OPTIONS) {
setTimeout(() => {
parentNode.children = [
{ id: `${parentNode.id}-child`, label: `${parentNode.label} Child` }
]
callback()
}, 1000)
}
}样式定制
通过 CSS 覆盖默认样式：
.vue-treeselect__control {
border-radius: 4px;
}
.vue-treeselect__menu {
max-height: 300px;
}注意事项
- 多选模式下 v-model 绑定的是数组
- 节点 id 必须唯一
- 大数据量建议使用异步加载
- 可通过
flat属性控制是否允许选择父节点
完整文档参考：vue-treeselect GitHub
