el-tree如如何获取层级
时间: 2023-12-29 10:22:16 浏览: 533
el-tree-select:基于el-select和el-tree改造的树形选择器(下拉框)组件
el-tree组件可以通过获取当前节点的层级来实现。可以使用`node-level`属性来指定节点的层级。具体的实现方法如下:
代码示例:
```html
<el-tree :data="treeData" :node-key="key" :props="defaultProps">
<span class="custom-tree-node" slot-scope="{ node }">{{node.level}}</span>
</el-tree>
```
```javascript
export default {
data() {
return {
treeData: [
{
id: 1,
label: '一级 1',
level: 1,
children: [
{
id: 4,
label: '二级 1-1',
level: 2,
children: [
{
id: 9,
label: '三级 1-1-1',
level: 3
},
{
id: 10,
label: '三级 1-1-2',
level: 3
}
]
}
]
},
{
id: 2,
label: '一级 2',
level: 1,
children: [
{
id: 5,
label: '二级 2-1',
level: 2
},
{
id: 6,
label: '二级 2-2',
level: 2
}
]
},
{
id: 3,
label: '一级 3',
level: 1,
children: [
{
id: 7,
label: '二级 3-1',
level: 2
},
{
id: 8,
label: '二级 3-2',
level: 2
}
]
}
],
key: 'id',
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
```
以上示例中,每个节点对象都有一个`level`属性,用来表示节点的层级。在`el-tree`组件的`slot-scope`中可以通过`node.level`来获取节点的层级信息。
阅读全文