vue-treeselect 的基本使用

### 关于 Vue-Treeselect 的使用教程 #### 安装与引入 为了在项目中使用 `vue-treeselect` 组件，首先需要安装该库。可以通过 npm 或 yarn 来完成安装： ```bash npm install @riophae/vue-treeselect --save ``` 或者 ```bash yarn add @riophae/vue-treeselect ``` 接着，在项目的入口文件（通常是 `main.js`），可以按照如下方式全局引入并注册此组件[^3]。 ```javascript // main.js import Treeselect from &#39;@riophae/vue-treeselect&#39; import &#39;@riophae/vue-treeselect/dist/vue-treeselect.css&#39; Vue.component(&#39;treeselect&#39;, Treiselect) ``` #### 基本用法 下面是一个简单的例子来展示如何在一个页面上使用这个组件。这里定义了一个选项列表作为树结构的数据源，并将其绑定到 `<treeselect>` 标签上的 `:options` 属性；同时通过 v-model 双向绑定了所选中的节点 ID 到变量 selectedId 上[^1]。 ```html <template> <div id="app"> <!-- TreeSelect --> <label>Choose a node:</label> <treeselect :options="options" v-model="selectedId"/> <!-- Display the selected value --> <p>You have chosen {{ selectedValue }}</p> </div> </template> <script> export default { name: &#39;App&#39;, data() { return { options: [ { id: &#39;a&#39;, label: &#39;a&#39;, children: [] }, { id: &#39;b&#39;, label: &#39;b&#39;, children: [{ id: &#39;ba&#39;, label: &#39;ba&#39; }] } ], selectedId: null, }; }, computed: { selectedValue() { const option = this.options.find(option => option.id === this.selectedId); return option ? option.label : &#39;&#39;; } } }; </script> ``` #### 配置项说明 除了基本属性外，还支持更多配置参数来自定义行为和外观，比如设置是否允许多选 (`multiple`)、禁用状态(`disabled`)等特性。具体可查阅官方文档获取完整的 API 列表[^2]。