vue-treeselect勾选

### 如何在 `vue-treeselect` 中实现多选功能

为了实现在 `vue-treeselect` 组件中的多选功能，需设置特定属性并遵循一定配置方式。组件支持嵌套选项的选择，在初始化时应确保数据结构适配这一需求。

#### 属性配置
启用多选的关键在于设置 `multiple` 属性为 true。这允许用户选择多个节点而不是仅限于单个选择[^1]。

// JavaScript 配置部分
data() {
    return {
        value: null, // 可以是一个数组来表示已选中的项
        options: [{
            id: 'a',
            label: 'Fruits',
            children: [
                {id: 'apple', label: 'Apple'},
                {id: 'banana', label: 'Banana'}
            ]
        }]
    }
}

#### HTML 结构定义
HTML模板中引入`<Treeselect>`标签，并绑定相应的参数：

<!-- HTML 模板 -->
<Treeselect
    v-model="value"
    :options="options"
    :multiple="true" />

此段代码展示了如何利用`:multiple="true"`开启多选模式；同时通过`v-model`双向绑定了当前被选中的值列表到变量`value`上[^2]。

#### 自定义显示效果
对于更复杂的场景，比如想要自定义每个选项前后的附加信息展示，则可以通过插槽(slot)机制完成个性化定制。下面的例子是在每个选项后面加上括号内的计数器作为额外说明文字[^3]。

<!-- 带有自定义内容的 treeselect -->
<treeselect>
    <template #option="{ node }">
        <span>{{ node.label }} ({{ node.count || 0}})</span>
    </template>
</treeselect>