Vue Treeselect: 获取选中节点IDs与Labels

"本文主要介绍如何在Vue项目中使用vueTreeselect组件来实现树形下拉框，并获取选中节点的ids和labels。通过参考官方API文档，我们可以更好地理解和操作这个组件。" 在Vue开发中，vueTreeselect是一个非常实用的组件，用于创建树形的多选下拉框。它提供了丰富的功能，包括扁平化展示、搜索、禁用分支节点等。要获取选中节点的ids（值）和labels（标签），我们需要利用它的事件绑定机制。 首先，我们导入vueTreeselect组件及其样式： ```javascript import Treeselect from '@riophae/vue-treeselect' import '@riophae/vue-treeselect/dist/vue-treeselect.css' ``` 然后，在模板中定义组件，并设置相关的属性和事件监听器： ```html <template> <treeselect ref="DRHA_EFaultModeTree" v-model="DRHA_EFaultModeTree_value" :multiple="true" :options="DRHA_EFaultModeTree_options" :flat="true" :show-count="true" :disable-branch-nodes="true" :searchable="false" @select="DRHA_EFaultModeTree_handleSelect" @deselect="DRHA_EFaultModeTree_handleDeSelect" placeholder="请选择" /> <p>labels：{{ DRHA_EFaultModeTree_lables }}</p> <p>ids: {{ DRHA_EFaultModeTree_value }}</p> </template> ``` 在`data`选项中，初始化选中值`DRHA_EFaultModeTree_value`和选中节点的labels数组`DRHA_EFaultModeTree_lables`： ```javascript data() { return { DRHA_EFaultModeTree_value: null, DRHA_EFaultModeTree_lables: [], // ...其他数据 }; }, ``` 接下来，我们需要编写处理选中和取消选中事件的方法： ```javascript methods: { DRHA_EFaultModeTree_handleSelect(node, instanceId) { this.DRHA_EFaultModeTree_lables.push(node.label); }, DRHA_EFaultModeTree_handleDeSelect(node, instanceId) { const index = this.DRHA_EFaultModeTree_lables.indexOf(node.label); if (index !== -1) { this.DRHA_EFaultModeTree_lables.splice(index, 1); } }, } ``` 在`@select`事件中，我们向`DRHA_EFaultModeTree_lables`数组添加被选中的节点标签；在`@deselect`事件中，我们移除被取消选中的节点标签。这样，`DRHA_EFaultModeTree_lables`就保存了当前所有选中节点的labels，而`DRHA_EFaultModeTree_value`则保存了对应的ids。 通过这种方式，你可以方便地获取并管理vueTreeselect组件中选中节点的信息。当用户进行选择操作时，页面会实时更新选中节点的ids和labels，提供了一个良好的交互体验。在实际项目中，这些数据可以用于进一步的数据处理或API调用。