el-select 树状数据
时间: 2023-11-01 15:22:11 浏览: 37
对于 el-select 组件,如果你想要展示树状数据,可以使用 el-tree-select 组件来实现。
首先,你需要准备一个树形结构的数据。数据需要满足以下格式:
```javascript
[
{
id: 1,
label: 'Node 1',
children: [
{
id: 11,
label: 'Node 1-1',
children: [
{
id: 111,
label: 'Node 1-1-1'
},
{
id: 112,
label: 'Node 1-1-2'
}
]
},
{
id: 12,
label: 'Node 1-2'
}
]
},
{
id: 2,
label: 'Node 2'
}
]
```
然后,在你的 el-select 组件中,使用 el-tree-select 组件,并将树形数据绑定到 options 属性上。
```html
<el-tree-select v-model="selectedNode" :data="treeData" placeholder="Select a node"></el-tree-select>
```
在上述代码中,selectedNode 是绑定的选中节点的值,treeData 是绑定的树形数据。
现在,当你打开 el-select 组件时,你将会看到一个带有树状结构的下拉菜单,可以选择树中的节点。
希望能帮到你!如果有任何问题,请随时问我。