el-tree 设置只能展示两级,不使用 show-checkbox,并且两级以后不占位置
时间: 2023-08-16 10:06:06 浏览: 242
漂亮的纵向二级菜单,只展开一个
5星 · 资源好评率100%
你可以使用 el-tree 的 render-content 属性来自定义树节点的内容,并且根据节点的 level 属性来控制节点的展示方式。具体实现可以参考以下代码示例:
```html
<el-tree :data="treeData" :render-content="renderContent"></el-tree>
```
```javascript
export default {
data() {
return {
treeData: [
{
label: '一级节点',
children: [
{
label: '二级节点'
}
]
}
]
};
},
methods: {
renderContent(h, { node, data }) {
if (node.level <= 1) {
// 只展示两级节点
return h('span', data.label);
} else {
// 隐藏两级以后的节点
return h();
}
}
}
};
```
在 renderContent 方法中,通过判断节点的 level 属性,决定是否展示节点的内容。如果节点的 level 小于等于 1,则展示节点的 label 属性;否则返回一个空节点,这样就实现了两级以后不占位置的效果。
阅读全文