vue-treeselect实现多选
时间: 2023-11-30 07:43:06 浏览: 124
vue-treeselect:具有对Vue.js的嵌套选项支持的多选组件
要使用vue-treeselect实现多选,需要按照以下步骤进行操作:
1.在main.js中插入如下代码:
```javascript
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
Vue.component('Treeselect',Treeselect)
```
2.在需要使用vue-treeselect的组件中,使用`<treeselect>`标签,并绑定`v-model`属性来实现多选功能。例如:
```html
<template>
<div>
<treeselect v-model="value" :options="options"></treeselect>
</div>
</template>
<script>
export default {
data() {
return {
value: [],
options: [
{
id: 1,
label: 'Option 1',
children: [
{ id: 2, label: 'Option 1.1' },
{ id: 3, label: 'Option 1.2' }
]
},
{
id: 4,
label: 'Option 2',
children: [
{ id: 5, label: 'Option 2.1' },
{ id: 6, label: 'Option 2.2' }
]
}
]
}
}
}
</script>
```
在上面的例子中,`value`绑定了选中的值,`options`是可选项列表。
阅读全文