首页el-tree-select 用法

el-tree-select 用法

时间: 2024-12-25 14:18:03 浏览: 163

`el-tree-select`是Element UI库中的一个组件，它是一个树状选择器，常用于展示层级结构的数据，并允许用户通过点击节点进行多选或单选操作。以下是基本的用法： 1. 引入依赖：首先，在Vue项目中安装Element UI并引入`ElTreeSelect`组件。 ```html <script src="https://unpkg.com/[email protected]/lib/index.js"></script> ``` 2. 定义数据结构：需要一个树形结构的数据数组，每个节点通常包含`label`（显示文本）、`value`（关联值）以及`children`（子节点列表）属性。 ```js const treeData = [ { label: '父级一', value: 'parent1', children: [ { label: '子级一', value: 'child1' }, { label: '子级二', value: 'child2' } ] }, // ... 其他节点... ]; ``` 3. 使用组件：在模板中声明`el-tree-select`组件，并设置其数据源和选项配置。 ```html <template> <el-tree :data="treeData" :props="defaultProps" v-model="selectedValues" @node-click="handleNodeClick" ></el-tree> </template> <script> export default { data() { return { treeData, defaultProps: { children: 'children', label: 'label', value: 'value' }, selectedValues: [] }; }, methods: { handleNodeClick(node) { if (node.children) { node.expanded = !node.expanded; // 展开或折叠节点 } else { this.selectedValues.push(node.value); // 单选，添加到selectedValues中 } } } }; </script> ``` 在这个例子中，`v-model`绑定的是`selectedValues`，表示用户的当前选择，`@node-click`事件处理函数响应节点点击，可以进一步控制节点状态。

阅读全文