elementui的<el-tree>如何设置选项之间的竖直方向间距
时间: 2024-05-03 09:22:30 浏览: 44
可以使用`node-key`和`props`属性来设置节点的唯一标识和节点的属性,然后使用`default-expand-all`属性来展开所有节点。最后,可以使用`indent`属性来设置节点之间的竖直方向间距。
示例代码如下:
```html
<template>
<el-tree
:data="data"
:node-key="nodeKey"
:props="defaultProps"
:default-expand-all="true"
:indent="20"
>
</el-tree>
</template>
<script>
export default {
data() {
return {
nodeKey: 'id',
defaultProps: {
children: 'children',
label: 'label'
},
data: [
{
id: 1,
label: 'Level one 1',
children: [
{
id: 11,
label: 'Level two 1-1',
children: [
{
id: 111,
label: 'Level three 1-1-1'
},
{
id: 112,
label: 'Level three 1-1-2'
}
]
},
{
id: 12,
label: 'Level two 1-2',
children: [
{
id: 121,
label: 'Level three 1-2-1'
},
{
id: 122,
label: 'Level three 1-2-2'
}
]
}
]
},
{
id: 2,
label: 'Level one 2',
children: [
{
id: 21,
label: 'Level two 2-1'
},
{
id: 22,
label: 'Level two 2-2'
}
]
}
]
}
}
}
</script>
```
在上面的示例中,`indent`属性设置为20,即节点之间的竖直方向间距为20个像素。您可以根据需要调整此值。
阅读全文