elementui 下拉框 怎么把对象树形数据 给它
时间: 2023-08-05 22:09:56 浏览: 39
如果你想在 ElementUI 的下拉框中使用树形数据,可以使用 `el-cascader` 组件。这个组件可以接受一个数组,每个元素包含 `value`、`label` 和 `children` 三个属性。其中,`value` 和 `label` 分别表示选项的值和名称,`children` 则表示当前选项的子选项,也是一个数组。因此,你可以将你的对象树形数据转化为这样的数组,然后传递给 `el-cascader` 组件即可。
以下是一个示例代码:
```html
<template>
<el-cascader
:options="options"
v-model="selected"
:props="props"
></el-cascader>
</template>
<script>
export default {
data() {
return {
selected: [],
data: {
id: 1,
name: 'root',
children: [
{
id: 2,
name: 'child1',
children: [
{
id: 3,
name: 'grandchild1'
},
{
id: 4,
name: 'grandchild2'
}
]
},
{
id: 5,
name: 'child2',
children: [
{
id: 6,
name: 'grandchild3'
},
{
id: 7,
name: 'grandchild4'
}
]
}
]
},
options: []
}
},
computed: {
props() {
return {
value: 'id',
label: 'name',
children: 'children'
}
}
},
mounted() {
this.options = [this.data];
}
}
</script>
```
在这个例子中,我们定义了一个对象树形数据 `data`,然后将它转化为数组并赋值给 `options`。在 `el-cascader` 组件中,我们使用 `props` 属性来定义选项的属性名,`v-model` 绑定选中的值。
注意,在使用 `el-cascader` 组件时,你需要将数据转化为特定的格式,这是因为 `el-cascader` 会自动根据这个格式来渲染选项和实现选项之间的联动。