vue-treeselect中展开事件

### 关于 `vue-treeselect` 组件中展开事件的使用

在 `vue-treeselect` 中，可以通过监听特定的事件来处理节点的展开操作。主要涉及的是 `expand-collapse-node` 事件，该事件会在节点被展开或折叠时触发。

#### 监听节点展开/折叠事件

为了实现这一功能，在模板部分绑定相应的事件处理器：

<template>
  <div>
    <!-- treeselect 组件 -->
    <vue-treeselect
      :options="options"
      v-model="value"
      @expand-collapse-node="handleNodeExpandCollapse"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      options: [
        {
          id: 'a',
          label: '选项A',
          children: [
            { id: 'aa', label: '子项AA' },
            { id: 'ab', label: '子项AB' }
          ]
        },
        // 更多选项...
      ],
    };
  },
  methods: {
    handleNodeExpandCollapse(node, ctx) {
      console.log('节点:', node);
      console.log('上下文:', ctx); // 上下文中包含 isExpanded 字段表示当前状态
    }
  }
};
</script>

上述代码展示了如何定义并响应 `expand-collapse-node` 事件[^2]。每当用户点击某个节点旁边的箭头图标以打开或关闭其下的子级列表时，就会调用指定的方法 (`handleNodeExpandCollapse`) 并传递两个参数——一个是代表所选节点的对象；另一个则是包含了额外信息（比如是否已扩展）的一个对象。

通过这种方式可以轻松获取到每次交互的信息，并据此执行进一步的操作逻辑，如加载更多数据、更新UI显示等。