vue-treeselect 多选 怎么设置父子联动

Vue-treeselect是一个基于Vue.js的树选择组件，它允许用户从树形结构中进行多选。如果想要实现父子联动的多选，即当父节点被选中时，其下的所有子节点默认也被选中；反之，当父节点取消选中时，子节点也跟着取消选中，通常需要配合组件提供的API和选项来定制。

步骤如下：

1. 安装 `vue-treeselect` 并在其组件上启用 `loadChildren` 功能，以便动态加载子节点。
2. 在组件的配置中，设置 `options` 或 `data` 属性，包括 `selected` 和 `checkStrictly` 参数。`checkStrictly` 用于控制是否严格检查整个子树，若设为 `true`，则会启用父子联动。

   <tree-select
     :options="options"
     :checkStrictly="true"  <!-- 启用父子联动 -->
     @node-selected="onNodeSelected"
   ></tree-select>

其中 `options` 可能包含一个数组表示已选中的节点 ID，例如：

   data() {
     return {
       options: {
         selected: [parentNodeId], // 初始化时选中父节点
         loadChildren: (node) => ... // 负责获取节点的子集
       }
     };
   },

3. 当用户在其他地方改变父节点的状态（如点击按钮或事件处理），通过调用 `updateSelectedNodes` 或手动修改 `options.selected` 来同步选择状态。
4. 编写 `onNodeSelected` 或者自定义事件处理器，在节点被选中时更新父节点的状态，以及可能影响到的子节点。

methods: {
  onNodeSelected(node) {
    if (node.parentId === parentId) {  // 检查是否是父节点
      this.updateSelectedNodes([...this.options.selected, node.id]);
    }
  },
  
  updateSelectedNodes(newIds) {
    this.options.selected = newIds;  // 更新选中节点数组
  }
}