el-tree 设置只能展示两级,不使用 show-checkbox
时间: 2023-08-16 08:06:06 浏览: 213
如果你想在 el-tree 中只展示两级,而且不想使用 show-checkbox,你可以通过设置 el-tree 的 props 和 slots 来实现。
首先,你可以设置 el-tree 的 show-checkbox props 为 false,这样就不会显示复选框。然后,你可以使用 el-tree 的 default-expand-all props 来展开第一级节点。最后,你可以使用 el-tree 的 scoped slot 中的 children 来控制节点的层级,只显示前两级节点。
下面是一个示例代码:
```html
<template>
<el-tree :data="data" :show-checkbox="false" :default-expand-all="true">
<template v-slot="{ node, data }">
<span v-if="node.level < 2">{{ node.label }}</span>
<span v-else>{{ data.length }} items</span>
</template>
</el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
label: 'Level 1 - 1',
children: [
{
label: 'Level 2 - 1',
},
{
label: 'Level 2 - 2',
},
],
},
{
label: 'Level 1 - 2',
children: [
{
label: 'Level 2 - 3',
},
{
label: 'Level 2 - 4',
},
],
},
],
};
},
};
</script>
```
在这个示例中,我们设置 el-tree 的 show-checkbox props 为 false,然后使用 el-tree 的默认展开所有节点的 props 来展开第一级节点。最后,我们使用 scoped slot 中的 children 来控制节点的层级,只显示前两级节点。
阅读全文