vue-treeselect 全选

### 实现 Vue-Treeselect 的全选功能

为了在 `vue-treeselect` 组件中实现全选功能，可以创建一个自定义按钮来触发全选逻辑。此方法涉及监听组件的选择变化并动态更新选项状态。

#### HTML 部分
引入样式文件以确保 Treeselect 正常显示[^1]：

<link rel="stylesheet" href="@riophae/vue-treeselect/dist/vue-treeselect.css">

#### JavaScript/TypeScript 部分
下面是一个简单的例子展示如何通过组合使用 `v-model` 和计算属性来达到全选效果:

<template>
  <div>
    <!-- 添加一个按钮用于触发全选 -->
    <button @click="selectAll">Select All</button>

    <!-- 使用 v-model 双向绑定 selectedOptions -->
    <treeselect :options="options" v-model="selectedOptions"/>
    
    <!-- 显示已选择项 -->
    {{ selectedOptions }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: 'a', label: 'Option A' },
        { id: 'b', label: 'Option B' },
        { id: 'c', label: 'Option C' }
      ],
      allIds: ['a','b','c'], // 所有可能的 ID 列表
      selectedOptions: []   // 当前被选中的项目列表
    };
  },
  methods: {
    selectAll() {
      this.selectedOptions = [...this.allIds];
    }
  }
}
</script>

上述代码片段展示了如何利用 `@click` 事件处理器连接到名为 `selectAll()` 的函数上，在点击时该函数会将所有的 option IDs 赋值给 `selectedOptions` 数组从而完成全选操作。

对于小程序环境下的配置，则需按照特定框架的要求调整引用路径以及注册方式[^2]:

{
  "component": true,
  "usingComponents": {
    "tree-select": "/components/tree-select/index"
  }
}

需要注意的是，具体实现细节可能会依据实际应用场景有所不同，比如数据源获取、异步加载等问题都需要额外处理。